VUE前端项目配置代理解决跨域问题

songliquan 2020-04-26 原文

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 
            },
        }
}

1. 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'
    }
})