Vue打包后處理跨域

我們都知道，在處理跨域時經常會用到jsonp，服務器端用到cors,或則本地測試用到nginx反向代理,vue開發模式的proxy等。當我們在自己開發的時候，可能會請求一些網上的接口，但是會遇到一些問題，比如不支持跨域的遠程數據接口無法使用，那么要怎么解決呢，先從nginx說起，Nginx (engine x) 是一個高性能的HTTP和反向代理web服務器，它能夠解決開發或則生產模式下的跨域，主要還是配置上的設置。

我們可以試試，我用的是windows系統的，下載鏈接，我是下載到了E盤，然后下載完解壓

 

里面有個conf文件夾，然后用編輯器打開里面的nginx.conf，下面是對它進行跨域的配置，這些是主要參數，其他可以不用管。

 server {
        listen       8181; //端口
        server_name  localhost;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root  D:\vue-website\dist; //路徑
            try_files $uri $uri/ /index.html
            a#dd_header 'Access-Control-Allow-Origin' '*';
            index  index.html index.htm;
        }

  location /api/ {
               add_header 'Access-Control-Allow-Origin' '*';
               add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
               add_header 'Access-Control-Allow-Headers' 'Authorization';
               proxy_pass http://www.xxx.com/; //設置要代理的域名
         }

 配置完后啟動nginx，start nginx

 

可以看到

 

這說明nginx運行OK，然后打開配置的端口，嘿嘿，運行成功，搞定

 

vue-cli3.0已經不需要配置過多的配置選項，vue.config.js就可以搞定，在本地開發中跨域的處理需要在config中配置proxy代理。配置如下

module.exports = {
        devServer: {
        proxy: {
            '/api': {
                target: 'http://xxx.xxx.xx',
                ws: true,  // proxy websockets
                changeOrigin: true,  // needed for virtual hosted sites
                pathRewrite: {
                    '^/api': ''  // rewrite path
                },
            },
        }
    }  
}

 如果是多個接口需要相應的加入。

vue打包后會生成一個dist文件，這里面是一些靜態資源等，這個時候打開dist里面的html可能會出現空白頁，這是因為打包時的路徑問題，在config中設置baseUrl就可以解決了

const BASE_URL = process.env.NODE_ENV === 'prodution' ? '/' : './';

但是有些接口會出現跨域問題，打開控制台會看到No 'Access-Control-Allow-Origin' header is present on the requested resource.這種請求攔截信息。

這是因為同源策略的限制，在本地開發時我們在本地啟用了一個node服務器，是它幫我們完成了相關的代理任務

 

那么打包后如何處理呢。這就要考慮到遠程代理了，遠程代理的網站很多，這里不做描述，它可以讓不支持跨域的遠程數據接口支持跨域。