vue请求controller报错has been blocked by CORS policy

时间: 2023-09-25 14:07:24 浏览: 92

vue解决跨域路由冲突问题思路解析

在开发Vue应用时，跨域问题是经常遇到的一个挑战。跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，出于安全原因，浏览器限制了来自不同源的页面进行交互，这就是所谓的同源策略。Vue.js是一套构建用户界面的渐进式框架，它通过组件化开发可以快速构建单页应用（SPA）。但是，在使用Vue进行开发时，前端与后端的接口通常会涉及跨域问题。解决跨域路由冲突问题通常有以下几种思路： 1. **使用代理解决跨域问题：** 在Vue项目中，可以通过配置代理服务器来解决跨域问题。通常是在开发环境中设置一个代理，当有跨域请求时，由前端开发服务器转发请求到目标服务器，从而绕过浏览器的同源策略限制。 2. **避免路由命名冲突：** 当前后端分离的架构下，前后端需要约定统一的API规范。为了避免前端路由名称与后端API路径产生冲突，一般在后端接口路径前加上统一的前缀，如‘/api/’。这样，即使前端路由名称与API路径相同，也不会产生冲突。 3. **API路径重写：** 在代理配置中使用pathRewrite选项，对请求路径进行重写。通过这种方式，可以在请求被转发到后端服务器之前，将API路径重写，去掉前缀，从而确保请求能够正确地发送到后端。 4. **统一入口路由配置：** 可以将所有API请求统一规范为一个入口。通过这种方式，在Vue应用中，所有的API请求都通过一个特定的前缀进行访问，前端的其他路由不再与API路径产生冲突。 5. **配置默认请求前缀：** 在使用axios发起请求时，可以设置默认的baseURL，这样在每个请求中就不需要再手动加上前缀了。这样可以简化请求的编写，提高开发效率。 6. **环境区分配置：** 在不同的开发环境中，可能会有不同的API前缀。比如在开发环境中可能是‘***’，而在生产环境中可能是‘***’。为了解决这个问题，可以在项目的config文件夹中创建一个api.config.js文件，根据环境变量来动态配置API的基础URL，这样在不同的环境中就能自动使用对应的前缀。具体到代码配置上，可以在Vue项目中的代理配置文件（例如：vue.config.js）中，进行如下配置： ```javascript module.exports = { devServer: { proxy: { '/api/**': { target: '***', pathRewrite: { '^/api': '' // 将/api去掉 } } } } } ``` 而对于axios的baseURL配置，可以在入口文件（通常是main.js）中进行如下配置： ```javascript import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) axios.defaults.baseURL = 'api' // 设置默认的请求前缀 ``` 在实际的Vue组件中发起请求时，使用this.$http实例，就可以直接使用相对路径请求后端接口，如： ```javascript logout(){ this.$http.post('users/logout').then(result => { let res = result.data; this.nickName = ''; console.log(res); }) }, getGoods(){ this.$http.post('goods/list').then(result => { let res = result.data; this.nickName = ''; console.log(res); }) } ``` 通过上述方法，能够有效解决Vue项目中遇到的跨域路由冲突问题。需要注意的是，跨域代理配置需要根据实际项目情况调整，并确保代理服务器能够正确处理转发规则。同时，配置环境区分的API路径时，需要仔细校验不同环境下API路径的正确性，防止因为环境变量导致的错误请求发送到不正确的服务器地址。

你遇到的问题是跨域错误，即前端通过Vue请求后端的Controller时出现了被CORS策略阻止的报错。这个错误通常是由于浏览器的同源策略所导致的。同源策略限制了不同源(协议、域名、端口)之间的资源访问。解决这个问题有几种方法。一种方法是在后端的Controller上添加跨域注解@CrossOrigin。这个注解可以让外界直接访问到这个Controller层。但是需要在每一个Controller都添加这个注解，可能会比较麻烦。另一种方法是创建一个CorsConfig类，继承WebMvcConfigurer，并重写addCorsMappings方法。在这个方法中，可以设置允许跨域的路径、允许跨域请求的域名、是否允许证书、允许的请求方法、允许的请求头和跨域允许时间。这样可以统一配置跨域规则，而不需要在每个Controller上添加注解。另外，还可以尝试将请求的Content-Type设置为表单类型，以避免CORS跨域错误。具体做法是在请求的headers中设置'Content-Type':'application/x-www-form-urlencoded'。这些方法都可以在不同情况下解决CORS跨域问题，你可以根据自己的项目需求选择其中的一种方法进行尝试。123

阅读全文

vue请求controller报错has been blocked by CORS policy

相关推荐

关于vue-resource报错450的解决方案

安装vue-cli报错 -4058 的解决方法

Vue报错has been blocked by CORS policy怎么解决

vue has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

vue前端通过图片链接下载后has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin

vue s been blocked by cors policy: no 'access-control-allow-origin' header i

详解vue 兼容IE报错解决方案

Vue-router 报错NavigationDuplicated的解决方法

Vue.js报错Failed to resolve filter问题的解决方法

解决vue安装less报错Failed to compile with 1 errors的问题

解决vue 使用axios.all()方法发起多个请求控制台报错的问题

vue init webpack 建vue项目报错的解决方法

Vue兼容IE报错：Babel-polyfill解决策略

精细金属掩模板(FMM)行业研究报告 显示技术核心部件FMM材料产业分析与市场应用

【创新未发表】斑马算法ZOA-Kmean-Transformer-LSTM负荷预测Matlab源码 9515期.zip

j link 修复问题套件

C#实现modbusRTU(实现了01 3 05 06 16等5个功能码)

【创新未发表】基于matlab粒子群算法PSO-PID控制器优化【含Matlab源码 9659期】.zip

最新推荐

解决vue2中使用axios http请求出现的问题

精细金属掩模板(FMM)行业研究报告 显示技术核心部件FMM材料产业分析与市场应用

【创新未发表】斑马算法ZOA-Kmean-Transformer-LSTM负荷预测Matlab源码 9515期.zip

j link 修复问题套件

Angular实现MarcHayek简历展示应用教程

管理建模和仿真的文件

深入剖析：内存溢出背后的原因、预防及应急策略（专家版）

Java中如何对年月日时分秒的日期字符串作如下处理：如何日期分钟介于两个相连的半点之间，就将分钟数调整为前半点

Crossbow Spot最新更新 - 获取Chrome扩展新闻

"互动学习：行动中的多样性与论文攻读经历"

精细金属掩模板(FMM)行业研究报告显示技术核心部件FMM材料产业分析与市场应用

精细金属掩模板(FMM)行业研究报告显示技术核心部件FMM材料产业分析与市场应用