Vue代理解決生產環境跨域問題 部署必備乾貨

當咱們前端要調用跨域接口時，咱們須要用代理解決跨域問題，好比Vue的代理配置proxy，可是當Vue項目打包成靜態文件時，他的代理也就失靈了，由於代理的前提是本地必須有service，本章講一下生產環境的Vue項目如何作代理。

本章咱們從兩方面講解Vue解決跨域的方案，一種是本地開發環境，另外一種是生產環境（nginx解決vue跨域問題）

1.Vue本地（開發環境）解決跨域流程以下

（1）打開config/index.js,在proxyTable中添寫以下代碼：

proxyTable: { 
  '/api': {  //使用"/api"來代替"http://f.apiplus.c" 
    target: 'http://f.apiplus.cn', //源地址 
    changeOrigin: true, //改變源 
    pathRewrite: { 
      '^/api': 'http://f.apiplus.cn' //路徑重寫 
      } 
  } 
}

（2）請求接口時加上‘/api’前綴

getData () { 
 axios.get('/api/bj11x5.json', function (res) { 
   console.log(res) 
 })

 2.生產環境解決跨域問題流程以下

（1）打包

咱們經過win+R命令打開CMD窗口，找到咱們項目根目錄 運行 npm run build命令

​

（2）服務器安裝nginx服務器

  安裝步驟 http://www.javashuo.com/article/p-kgmiqnah-dw.html

（3）配置nginx

  找到nginx的配置文件  nginx.conf ，它的路徑是 /etc/nginx/nginx.conf

  nginx.conf的配置以下

server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location /api {
            proxy_pass https://www.baidu.com;  #代理的域名
            add_header 'Access-Control-Allow-Origin' '*'; 
            add_header 'Access-Control-Allow-Credentials' 'true'; 
        }
        location  / {
            root   /var/www/vue/;
            index  index.html index.htm;
        }
    }

解釋以下：

  https://www.baidu.com 是咱們要代理域名

  add_header 是增長返回頭  解決跨域問題

注意：vue項目在請求域名的前面就要加上「/api」字符串，請求示例以下

test.post('/api/product/getData',params)