vue項目打包部署在nginx跨域通路問題

由于浏覽器的同源政策，vue項目上線時要部署在伺服器，通路webserver時會出現跨域通路問題。

http請求存在簡單請求和複雜請求兩種，具體原理可以去讀阮一峰這篇文章，講解的很明白。出自http://www.ruanyifeng.com/blog/2016/04/cors.html

1、一般簡單請求跨域通路會出現“No ‘Access-Control-Allow-Origin’ header is present on the requested resource“這個問題，背景程式請求頭設定header（Access-Control-Allow-Origin，*）可以解決。代表着允許所有的域名請求，也可以根據自己需求設定特定的域名。

2、複雜請求會出現405 method not found 的問題，因為複雜請求會預先發送options請求，擷取伺服器支援的跨院請求方法。背景這是header（Access-Control-Allow-Origin，），header（Access-Control-Allow-method，‘POST，PUT,DELETE,OPTIONS’）,header（Access-Control-Allow-Headers，‘Authorizations’）均不能解決問題。

具體解決方案是使用nginx設定反向代理。

在vue項目的config/index.js檔案配置代理

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://172.21.4.110:8001',//設定你調用的接口域名和端口号
        changeOrigin: true,     //跨域
        pathRewrite: {
          '^/api': '/'          //這裡了解成用‘/api’代替target裡面的位址，後面元件中我們掉接口時直接用api代替 比如我要調用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，直接寫‘/api/xxx/duty?time=2017-07-07 14:57:22’即可
        }
      }
    },
}
           

開發環境下配置代理後可以發送post請求，但是在生産環境下無法調通。是以我用到了nginx的反向代理。在nginx的配置檔案nginx.conf 修改如下：

server {
    listen       9527;
    server_name  localhost;
	root   /usr/share/nginx/html/dist;
	index  index.html index.htm;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;
	
	#add_header Access-Control-Allow-Origin *;
	#add_header Access-Control-Allow-Methods POST,GET,OPTIONS;
	#add_header Access-Control-Allow-Headers Authorization;

    location /api/ {
        rewrite ^/b/(.*)$ /$1 break;
		proxy_pass http://172.21.4.110:8001/; **#此處結尾必須有‘/’，不然會出現404 page not found**
    }
}
           

重新開機nginx服務，再次發送post請求

this.$axios({
              url: ‘/api/a’,
               method:'post',
               headers:{"Authorization":'Basic ' + token}
             }).then(function(return_data){}）
           

此處的URL中/api在nginx中會自動轉為http://172.21.4.110:8001/，請求成功。