前端如何使用proxyTable和nginx解决跨域问题

落日映苍穹つ 2021-07-26 22:11 373阅读 0赞

最近经常遇到跨域的问题，有时候问题虽然解决了，但是还是会有些模棱两可概念不清，于是在网上看了一些教程结合实际使用，做个笔记。

### 1.跨域原因 ###

*  浏览器的限制
 *  跨域（协议/域名/端口的不同）
 *  XMLHttpRequest请求

### 2.解决方案 ###

*  1) 浏览器禁止检查（适用于本地写demo调试）
 *  2) 后端代码设置请求参数，允许跨域
 *  3) 前端不发送XMLHttpRequest请求（如使用`JSONP`）
 *  4) 前端使用代理转发的形式

本篇主要介绍如何使用nginx和proxyTable代理的方式解决前端跨域问题

### 3.proxyTable ###

案例：假设我们现在本地的开发地址是`http://localhost:8080`，请求的地址是:`http://localhost:8888/static/cnWord.json`，我们在代码中写出请求如下：

axios.get('http://localhost:8888/static/cnWord.json').then((res)=>{
        console.log('success')
    }).catch((res)=>{
        console.log('error')
    })

因为端口号的不同，运行结果报了跨域的错误  
![format_png][]

下面介绍如何使用`proxyTable`（基于`vue-cli`项目中自带的服务器配置），解决问题，方便开发环境的调试，文件位置：  
![format_png 1][]

我们给`proxyTable`加上配置：

proxyTable: {
        '/api': {
            target: 'http://localhost:8888'，
            changeOrigin: true，
            pathRewrite: {
                '^/api': ''
            }
        }
    }

*  `target`：接口的域名，这里不能直接写成`'http://localhost:8888/static/cnWord.json'`，亲测无效~
 *  `changeOrigin`：开启代理
 *  `pathRewrite`：可以看到我使用了`/api`来匹配请求接口的域名，而接口名称是`/static/cnWord.json`，因此在实际请求中应该写成`/api/static/cnWord.json`，但是我实际请求的地址又是没有api前缀的，因此需要通过pathRewrite重写地址，将接口请求的时候前缀去除。

> 注意修改备注后，需要重新使用 `npm run dev` 打包编译项目使配置生效

更改请求：

axios.get('/api/static/cnWord.json'，).then((res)=>{
        console.log('success')
    }).catch((res)=>{
        console.log('error')
    })

此刻控制台打印出  
![format_png 2][]  
跨域成功!

### 4.Nginx ###

上面的方式可以解决我们在vue项目中开发环境的跨域问题，但是无法解决生产环境上的跨域问题，有的时候生产环境上也需要处理跨域问题，这个时候`proxyTable`就不管用咯，`nginx`就闪亮登场了~

作用

*  1） http服务器，可以独立提供http服务；
 *  2） 虚拟主机：多个域名指向同一个服务器，服务器根据不同的域名把请求转发到不同的应用服务器；
 *  3） 反向代理：负载均衡，将请求转发至不同的服务器

安装与使用

[ngixn下载][ngixn]，解压文件后，启动命令行开启web服务器,【注意】nginx的下载包不可放在有中文目录的文件夹。

*  `start nginx` 启动，直接访问`http://localhost/`  
    ![format_png 3][]

更多命令：

*  `nginx -s stop` 快速停止或关闭
 *  `nginx -s quit` 正常停止或关闭
 *  `nginx -s reload` 修改配置文件后重启

跨域配置项

解决跨域问题，主要是更改nginx的配置文件`nginx.conf`，通过配置修改地址的转发。  
![format_png 4][]

// 默认配置
        location / {
            root   html; #文件根目录
            index  index.html index.htm; #默认起始页
        }

如此，可以将`vue`打包后的文件放到`nginx`的`html`文件夹中，也可以将`root`的指向打包后的文件夹，用于快速创建http服务器。还是上面的案例，把`proxyTable`中的配置全部删除，然后nginx中增加配置如下：

location / {
            root   D:\cross-demo\dist #直接指向打包后的文件
            index  index.html index.htm;
        }
    
        location /api/ {
            proxy_pass http://localhost:8888/; # 将地址代理到api上
        }

访问`http://localhost/` （访问nginx的http服务）  
![format_png 5][]

跨域成功！

虚拟主机配置项

server
        {
            #监听端口
            listen 80; 
    
            #服务访问域名
            server_name localhost; 
    
            location /api/ { 
                # 反向代理的地址
                proxy_pass http://localhost:8888/; 
    
                # 对发送给客户端的URL进行修改
                proxy_redirect off; 
                 
                # 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
    
                # 允许客户端请求的最大单文件字节数
                client_max_body_size 10m;  
     
                # 缓冲区代理缓冲用户端请求的最大字节数      
                client_body_buffer_size 128k;
    
                # 表示使nginx阻止HTTP应答代码为400或者更高的应答。
                proxy_intercept_errors on;
    
                # nginx跟后端服务器连接超时时间
                proxy_connect_timeout 90;
    
                # 后端服务器数据回传超时时间
                proxy_send_timeout 90;
    
                # 连接成功后，后端服务器响应超时时间
                proxy_read_timeout 90;
    
                # 设置代理服务器（nginx）保存用户头信息的缓冲区大小
                proxy_buffer_size 4k;
               
                # 设置用于读取应答（来自被代理服务器）的缓冲区数目和大小
                # 默认情况也为分页大小，根据操作系统的不同可能是4k或者8k
                proxy_buffers 4 32k;
    
                # 高负荷下缓冲大小（proxy_buffers*2）
                proxy_busy_buffers_size 64k;
    
                # 设置在写入proxy_temp_path时数据的大小，预防一个工作进程在传递文件时阻塞太长
                proxy_temp_file_write_size 64k;
            }       
            
        }
    }

常见配置

location /api/ {  
        proxy_pass http://localhost:8888/;
        proxy_pass_request_headers on;
        proxy_set_header Connection "";       
        client_max_body_size    30m;
        client_body_buffer_size 128k; 
        proxy_redirect off;
        proxy_connect_timeout   300;
        proxy_send_timeout      300;
        proxy_read_timeout      300;
        proxy_buffer_size       4k;
        proxy_buffers           4 32k;
        proxy_busy_buffers_size 64k;
        proxy_temp_file_write_size 64k;
        proxy_next_upstream http_502 http_504 error invalid_header; 
    }

一般情况下，解决前端跨域直接使用这些配置就足够了，了解各配置项含义，更易于理解。更改location后的转发代理地址即可。

**以下完整配置：一个server里面两个location**

server {
            listen       80;
            server_name  localhost;
     
            #charset koi8-r;
     
            #access_log  logs/host.access.log  main;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     
            location / {
                root   html;
                index  index.html index.htm;
            }
     
            location /prod-api/ {
                    proxy_pass http://localhost:8090/;
                    proxy_pass_request_headers on;
                    proxy_set_header Connection "";       
                    client_max_body_size    30m;
                    client_body_buffer_size 128k; 
                    proxy_redirect off;
                    proxy_connect_timeout   300;
                    proxy_send_timeout      300;
                    proxy_read_timeout      300;
                    proxy_buffer_size       4k;
                    proxy_buffers           4 32k;
                    proxy_busy_buffers_size 64k;
                    proxy_temp_file_write_size 64k;
                    proxy_next_upstream http_502 http_504 error invalid_header; 
            }
           
        }

[format_png]: /images/20210726/f39cfc3df3aa4500b3df6156224724f6.png
[format_png 1]: /images/20210726/4a0027f10ef3405184f814309096949e.png
[format_png 2]: /images/20210726/2e9b238b9dbc4bbbb00d84dbd1c75279.png
[ngixn]: http://nginx.org/en/download.html
[format_png 3]: /images/20210726/cb69152012f7496bab64fdcbbe610756.png
[format_png 4]: /images/20210726/65b8f9f5e336422182063dc7d71d54e9.png
[format_png 5]: /images/20210726/84ebb9aa3cf04822be8d12bc7b61ecbb.png