1.前言

我在做项目的过程中，需要去请求其他域名下的api，项目用的是Vue+SpringBoot前后端分离，所以直接在前端用axios发送请求，但是却报跨域的错误，请求失败。

什么是跨域？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

2.问题初步解决

在经过百度查找了多种解决方案后，终于通过设置Vue.config.js文件中的代理解决了这个问题。

2.1 配置proxy代理

假定你要请求的接口是 https://www.baidu.com/test。

首先我们需要先配置vue.config.js文件下的 devServer下的proxy，在proxy属性下添加以下代码，target属性代表你要请求的目标网站，pathRewrite将 /baidutest 指代https://www.baidu.com/。

headers必须要配置，这里强制配置了请求头的源。

proxy: {
      ‘/baidutest‘: {
        target: ‘https://www.baidu.com/‘,
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          ‘^/baidutest‘: ‘‘
        },
        headers:{
          referer:"https://www.baidu.com/",
          origin: "https://www.baidu.com",
        },
      },
}

2.2请求api

配置好代理，我们就可以写代码请求了，如下

import axios from ‘axios‘;

export function test(val){
  let url=‘/baidutest/test?param=‘+val;
  return  axios({
    url: url,
    method:‘GET‘ ,
  })
}

这里的url就相当于https://www.baidu.com/test?param=val

调用函数，请求成功，问题解决了吗?

问题解决了但是又没有完全解决，这是在我开发测试状态下这样配置没问题，可以访问成功，但是当我把前端打包部署之后又出现了新的问题。。。。。

3.生产部署环境下的新问题

将前端打包部署到nginx环境下，再访问又访问不到了，原因：vue.config.js文件下配置的代理不起作用了。解决方案如下：

配置nginx代理，

打开nginx.conf文件，添加如下配置，道理和配置vue.config.js一样

这样一来，在生产和开发状态下的跨域问题就都解决了。

第一次写博客，可能有些地方描述的不太好，敬请指正。

Vue+SpringBoot前后端分离在开发和生产两种环境下解决跨域问题

原文：https://www.cnblogs.com/dyds/p/15141887.html