Vue开发环境和服务器部署的跨域问题解决方案

开发环境中，由于域名ip端口的不同会遇到跨域的问题，此时我们需要配置代理服务，在根目录新增 vue.config.js 文件。

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://107.10.128.59:8082/', //接口域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/api': ''
                }
            }
        }
    }
}

请求数据用的是axios，所以在axios文件中，将baseURL修改为‘/api’即可

import axios from 'axios'

export function request(config) {
    const instanse = axios.create({
        baseURL: '/api',
        timeout: 3000
    })

    return instanse(config)
}

好啦，以上就是在开发环境中的跨域配置，那如果打包扔到服务器上请求呢，接下来就是服务器的跨域问题了。

选择用了nginx的反向代理，在nginx的conf文件夹中找到nginx.conf的配置文件，在server中做如下的配置

location /api {
        proxy_pass'http://107.10.128.59:8082/;
        }