Vue跨域问题前端怎么解决（分享Vue跨域的两种常用的解决方案）

前端vue 开发中，涉及到网络请求的时候经常会出现跨域问题，即前端报错"*** blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource"

跨域前端异常

跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。

两种常用的解决前端Vue跨域问题方案

1、服务端Controller加注解@CrossOrigin

Spring 从4.2版本后开始支持 @CrossOrigin 注解实现跨域，在需要跨域访问的方法或者类上加上这个注解即可。

2、设置vue代理步骤如下：

vue中使用axios给生产环境和开发环境配置不同的baseUrl

第一步：设置不同的接口地址

config/dev.env.js代码修改为：

开发访问地址配置

config/prod.env.js代码修改为：对应正式访问地址

正式地址配置

第二步：调用axios的文件下修改baseUrl

axios.defaults.baseURL = process.env.API_ROOT

第三步：vue2代理，修改文件config/index.js文件

vue 代理地址

proxyTable: {
"/api": {
target: "http://localhost:8080", // 需要代理地址
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { //重写请求路径上匹配到的字段，如果不需要在请求路径上，重写为""
'^/api': '', //重写请求路径
}
}

通过配置代理，如请求接口http://localhost:8081/api/user/login 则实际请求http://localhost:8080/user/login