這里就不解釋什么是跨域了。

跨域是前端最頭疼的事情，它阻止了我們向后端請求數(shù)據(jù)，使之我們無法拿到數(shù)據(jù)去渲染。

當(dāng)然，后端可以解決跨域，而且相當(dāng)簡單。但是如果再后端沒辦法的情況下，前端如果處理這種問題呢？

一：開發(fā)環(huán)境下（就是vue項(xiàng)目本地開發(fā)，沒打包部署前）

1、vue cli2.x (npm run dev運(yùn)行的項(xiàng)目)：

我們可以在config文件夾中找到webpack的配置文件，其中的 index.js 文件中可以找到對應(yīng)的跨域的配置，詳情如下

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/web1': {
            target: 'http://192.1.2.33:5000/api/StudentSourceManage',// 這里是你實(shí)際真正請求的地址
            changeOrigin: true,
            pathRewrite: {
                '^/web1': ''// 同上
            }
        },
    },
  },
}

這里用web1(名字可自定義)代替實(shí)際的請求地址(寫接口的公共部分即可)，然后在調(diào)用接口的地方用web1代替此地址

2、vue cli3.x(npm run serve運(yùn)行的項(xiàng)目)：

vue cli3中對于webpack的配置文件都是不可見的，但是我們可以自寫配置去覆蓋它

在項(xiàng)目的根路徑下新建個(gè)vue.config.js文件，然后在文件中寫上跨域的配置即可

module.exports = {
  devServer: {
    proxy: {
      '/web': {
        target: 'http://192.1.2.3:9000', // 對應(yīng)自己的接口
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          '^/web': '',
        },
      },
    },
  },
};

二、nginx部署vue項(xiàng)目實(shí)現(xiàn)解決跨域：

雖然上述配置解決了我們開發(fā)環(huán)境的跨域問題，但是vue基于打包會刪除對應(yīng)配置，那么打包后上述的配置就不會再起作用，那么我們?nèi)绾谓鉀Q呢？可以部署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對象中包括一個(gè)server，是用來搭建服務(wù)器的，linsten和server_name是你項(xiàng)目要部署的地址和端口號，location后面的/api是為了快速匹配下面的對應(yīng)地址，proxy_pass是實(shí)際要請求的服務(wù)器地址，第二個(gè)location下面的root指向項(xiàng)目地址，這里是xiangmu文件夾下的dist文件夾，因?yàn)槲覀冎纕ue項(xiàng)目打包后會生成dist文件夾，文件夾中會有一個(gè)index.html文件

配置好文件后，我們把dist文件放到對應(yīng)位置，然后啟動(dòng)nginx應(yīng)用程序即可。（需要nginx的配置文件，請聯(lián)系博主）

然后我們再瀏覽器中訪問我們的部署地址即可。（文中的部署地址是10.8.9.94:8080）

好了，以上就解決了我們前端跨域的問題，開發(fā)環(huán)境和正式部署環(huán)境都能解決跨域。

如有問題，請指出，接收批評。