前端跨域处理的两种方式proxyTable和nginx

前端在开发环境开发项目的过程中会遇到一些跨域的问题，后端在服务器上已经处理了跨域，但是由于浏览器的安全机制，发送的请求还是不能过去，基于这种情况下，本文着重介绍proxyTable和nginx两种常见的处理跨域的方式。

1.proxyTable

vue3.0配置proxyTable,需要在新建的vue.config.js文件里面配置

 devServer: {
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        open: true,
      // 配置代理
        proxy: {
            '/api': {
                target: 'http://XXX',//里面填写目标接口域名
                changeOrigin: true,//开启代理
                pathRewrite: {
                    '^/api': ''//重写接口
                }
            }
        },
        before: app => {}
    },

vue2.0配置proxyTable,需要在config文件里面的index.js配置

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        // 代理地址
        target: 'http://XXX',
        changeOrigin:true,//开启代理
        pathRewrite:{
            '^/api/':'' //重写接口
        }

        // 可以看到我使用了/api来匹配请求接口的域名，而接口名称是/static/cnWord.json，因此在实际请求中应该写成/api/static/cnWord.json，
        // 但是我实际请求的地址又是没有api前缀的，因此需要通过pathRewrite重写地址，将接口请求的时候前缀去除
      }
    },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8200
  },

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

2.nginx

proxyTable的方式主要用于解决vue开发环境跨域的问题，但是我们有的时候也需要处理生产环境的跨域问题，这个时候就需要借助于nginx来处理拉。。。

nginx的作用：

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

安装与使用

• 可以百度搜索nginx下载，将下载的文件解压后，启动命令行开启web服务器,【注意】nginx的下载包不可放在有中文目录的文件夹。
• 解决跨域问题，主要是更改nginx的配置文件nginx.conf，通过配置修改地址的转发。

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

根据上面的默认配置，你可以将vue打包后的文件放到nginx的html文件夹中，也可以将root的指向打包后的文件夹，用于快速创建http服务器。最后nginx中增加配置如下：

 location / {
        root   D:\cross-demo\dist #直接指向打包后的文件
        index  index.html index.htm;
    }

    location /api/ {
        proxy_pass http://localhost:8888/; # 将地址代理到api上
    }

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

nginx虚拟主机配置项相关参数

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; 
}