vue实现本地解决跨域 nginx实现部署解决跨域

女爷i 2021-08-13 23:28 629阅读 0赞

这里就不解释什么是跨域了。

跨域是前端最头疼的事情，它阻止了我们向后端请求数据，使之我们无法拿到数据去渲染。

当然，后端可以解决跨域，而且相当简单。但是如果再后端没办法的情况下，前端如果处理这种问题呢？

**一：开发环境下（就是vue项目本地开发，没打包部署前）**

**1、vue cli2.x (npm run dev运行的项目)：**

我们可以在config文件夹中找到webpack的配置文件，其中的 index.js 文件中可以找到对应的跨域的配置，详情如下

module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/web1': {
                target: 'http://192.1.2.33:5000/api/StudentSourceManage',// 这里是你实际真正请求的地址
                changeOrigin: true,
                pathRewrite: {
                    '^/web1': ''// 同上
                }
            },
        },
      },
    }

这里用web1(名字可自定义)代替实际的请求地址(写接口的公共部分即可)，然后在调用接口的地方用web1代替此地址

**2、vue cli3.x(npm run serve运行的项目)：**

vue cli3中对于webpack的配置文件都是不可见的，但是我们可以自写配置去覆盖它

在项目的根路径下新建个vue.config.js文件，然后在文件中写上跨域的配置即可

module.exports = {
      devServer: {
        proxy: {
          '/web': {
            target: 'http://192.1.2.3:9000', // 对应自己的接口
            changeOrigin: true,
            ws: false,
            pathRewrite: {
              '^/web': '',
            },
          },
        },
      },
    };

**二、nginx部署vue项目实现解决跨域：**

虽然上述配置解决了我们开发环境的跨域问题，但是vue基于打包会删除对应配置，那么打包后上述的配置就不会再起作用，那么我们如何解决呢？可以部署nginx解决此问题

看下nginx的配置文件：

#user  nobody;
    worker_processes  1;
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
    
        keepalive_timeout  65;
    
    
        server {
            listen       8080;
            server_name  10.8.9.94;
    
            location ^~ /api {
                proxy_pass   http://192.1.2.3:9000;
                add_header Access-Control-Allow-Methods *;
                add_header Access-Control-Max-Age 3600;
                add_header Access-Control-Allow-Credentials true;
                add_header Access-Control-Allow-Origin $http_origin;
                add_header Access-Control-Allow-Headers $http_access_control_request_headers;
                if ($request_method = OPTIONS ) {
                    return 200;
                }
            }
    
            location / {
                root   xiangmu/dist;
                index  index.html index.htm;
                add_header 'Access-Control-Allow-Origin' '*';
                try_files $uri $uri/ /index.html;
            }
    
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    
    }

上述配置文件中，http对象中包括一个server，是用来搭建服务器的，linsten和server\_name是你项目要部署的地址和端口号，location后面的/api是为了快速匹配下面的对应地址，proxy\_pass是实际要请求的服务器地址，第二个location下面的root指向项目地址，这里是xiangmu文件夹下的dist文件夹，因为我们知道vue项目打包后会生成dist文件夹，文件夹中会有一个index.html文件

配置好文件后，我们把dist文件放到对应位置，然后启动nginx应用程序即可。（需要nginx的配置文件，请联系博主）

然后我们再浏览器中访问我们的部署地址即可。（文中的部署地址是10.8.9.94:8080）

好了，以上就解决了我们前端跨域的问题，开发环境和正式部署环境都能解决跨域。

如有问题，请指出，接收批评。

个人微信公众号：

![20200824114945409.png][]

[20200824114945409.png]: /images/20210813/dee9238ee625430f9c1c709b67302d45.png