VUE前端項目配置代理解決跨域問題

問題如下，經常在本地調試接口出現這種問題

解決方式1：Chrome 的擴展插件

• 以前使用Chrome 的擴展插件，但是有時候還是會出現莫名其妙的問題。
• 需要梯子才行 Allow CORS: Access-Control-Allow-Origin

解決方式2：服務端配置跨域訪問

• 也可以在服務端配置解決這個問題，這個要找后台協商。
• 很多開源的第三方庫都做了處理，你在哪里調用都不會出現跨域問題。

解決方式3：前端項目配置本地代理

• 經過測試，這種方式通用性很強，不需要知道服務器有沒有配置跨域，瀏覽器有沒有裝插件，都可以訪問外部接口。
• 1. Vue項目中 config/index.js

module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'https://1.2.3.4:89', // 接口地址
                changeOrigin: true, // 是否跨域
                pathRewrite: { 、// 轉發
                    '^/api': ''
                },
                secure: false 
            },
        }
}

• 2. src/api/index.js 中如下配置 baseURL

const debug = process.env.NODE_ENV !== 'production'
const axInstance = axios.create({
    baseURL: debug ? 'api' : 'http://1.3.4.5.6:89',
    timeout: 10000,
    responseType: 'json',
    withCredentials: false, // 表示跨域請求時是否需要使用憑證
    headers: {
        token: store.state.axios.token,
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
})

• 配置完畢后，運行項目，訪問接口 http://0.0.0.0:8080/api/getinfo 就會被轉發到 https://1.2.3.4:89/getinfo