Vue 開發調試階段如何解決跨域

在開發階段, 一般都是用webpack或者nodejs做伺服器, 通路位址也都是本地IP, 和背景API對接時, 難免就遇到跨域的問題了.

一般解決方法有這麼幾種:

• 用jsonp
• 讓後端設定Access-Control-Allow-Origin
• 使用nodejs做代理

一. 用jsonp

jsonp的原理是script标簽引入js是不受域名限制的, 由于是模拟插入script标簽, 是以不可以用post請求 帶cookies的方法參見下面設定header的方法

二. 設定header

設定header比jsonp好, 可以用post方式請求, 配合後端, 也可以攜帶cookies 後端添加如下header:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: www.xxx.com
           

如果需要攜帶cookies, 這裡Access-Control-Allow-Origin将不可以使用泛型(即*), 同時ajax請求需要設定withCredentials = true, 代碼如下:

原生ajax請求:

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.xxx.com/api.php", true);
xhr.withCredentials = true;
xhr.send();

           

使用jQuery的$.ajax:

$.ajax({
    type: "POST",
    url: "http://www.xxx.com/api.php",
    dataType: 'json',
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true
}).then((json) => {
    // balabala...
})
           

使用vue-resource:

三. 使用nodejs做代理

設定header, 又要求爺爺, 告奶奶的, 别人不給面子怎麼辦? 這時候就隻得靠自己了.

vue-cli是vue官方出的vue腳手架, 其實作者已經幫我們考慮好了, 也留了接口, 我們隻需要添加幾行代碼即可.

配置代理

找到項目檔案夾下的config/index.js, 裡面有一行proxyTable: {}, 這裡就是作者為我們留的接口, 我們添加代理規則進去

dev: {
    env: require('./dev.env'),
    port: 9999,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/user': {
            target: 'http://192.168.4.124:7200',
            changeOrigin: true,
            pathRewrite: {
                '^/user': '/user'
            }
        },
        '/wpk': {
            target: 'http://192.168.4.124:7200',
            changeOrigin: true,
            pathRewrite: {
                '^/wpk': '/wpk'
            }
        }, 
        '/launcher': {
            target: 'http://www.xxx.com', // 目标域名
            changeOrigin: true,
            pathRewrite: {
                '^/launcher': '/launcher' // 規則, 見下面說明
            },
            headers: {
                'Cookie': 'SID=810q3nmoi5mfp8geb9bkm9jql0;' //這裡可以設定cookies, 也可以不設定
            }
        }
    }
}
           

代理規則:

假如說, 後端api的位址為: http://www.xxx.com/launcher, 我們要替換成本地的http://localhost:8080/launcher, 規則隻需設定’^/launcher’: ‘/launcher’, 代碼最終還是要上線的, 是以除了域名外, api位址最好不要變