vue.js 本地調用遠程接口進行開發，如何進行跨域及cookie傳遞

在前后端分離vue作為前端框架，在使用服務器接口時面臨的第一個問題就是跨域。本文涉及內容僅保證在vue-cli3.0腳手架創建的項目中、及本地調試中有效（使用之前版本腳手架創建的項目請自行轉換），本文內容不適用於服務器端前后台打包部署。

一、處理跨域接口調用

1、在項目根目錄下建立vue .config.js文件

 

2、在vue.config.js中配置本地代理進行轉發

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://xxx.xxx', //服務器的地址
                secure: true,//如果是https請設置為true
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
    }
}
//此時便可將本地Ajax對/api路徑的請求通過本地代理轉發到 https://xxx.xxx

3、axios配置

import axios from 'axios'

//axios.defaults.baseURL = 'https://xxx.com' 全局方式生成環境使用的地址
//const baseURL = 'https://xxx.com' 對象方式生成環境使用的地址
const baseURL = '/api' //本地調試用地址，正式發布時要更換為正式地址
const request = axios.create({
  baseURL: baseURL,
  timeout: 5000
});

axios請求

import request from 'request.js'

export function getUserList(query) {
    return request({
        url: '/core/usrt/list',
        method: 'get',
        params: query
    })
}

4、此時就可以在愉快的玩耍了！

二、處理cookie及身份認證

在使用cookie進行身份識別的體統中，雖然可以跨域調用到遠程接口了，但是身份認證后才能正常工作的接口此時調用會有類型下面的情況：

 

真是喜大苦奔/(ㄒoㄒ)/~~

為啥會這樣呢：本地調試vue用的localhost，遠程接口用的是xxx.com（或192.168.xxx.xxx）。那么仔細觀察調試工具的網絡請求，你會發現cookie的domain有些不同。

 

 就是因為domain域名不同，所以從A網站來得cookie是不可能被發送大B網站的。我們本地調試用的是localhost，接口自然接受不到身份信息相關的cookie啦，因此調用接口不順暢。

要解決這個問題需要2步：

1、對接口網站的cookie也進行代理，配置如下：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://xxx.com',
                secure: true,
                changeOrigin: true, 
                pathRewrite: { 
                    '^/api': ''
                },
                cookieDomainRewrite: { 'xxx.com': 'localhost' }
            }
        },
    }
}

2、axios啟用cookie、session的配置，這樣axios就會在執行Ajax信息的時候攜帶cookie了：

//axios.defaults.withCredentials = true
const request = axios.create({
  baseURL: baseURL,
  timeout: 5000,
  withCredentials: true//攜帶身份認證文件（cookie）
});

3、重新進行vue本地調試，世界變得絲滑了，可以自由玩耍了！