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

 分类:vue教程时间:2022-11-15 07:30:01点击:
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

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: