前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-

2024-04-09 18:21:15

完整报错如下：

Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8084' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST http://localhost:8081/login net::ERR_FAILED 500

createError.js?e648:16 Uncaught (in promise) Error: Network Error
at createError (createError.js?e648:16)
at XMLHttpRequest.handleError (xhr.js?b9e2:117)

错误原因：

本人的项目是Vue+SpringBoot前后端分离的，前后端项目启动的端口号不一样，因此域名不一样，产生跨域问题导致。

解决办法：

方法一：

在后端接口上加注解：

@CrossOrigin(origins = "*",maxAge = 3600)

不过这样需要在每一个访问接口上都要加这条注解，比较麻烦，推荐采用方法二。

方二一：

在前端项目的src目录下新建代理配置文件vue.config.js

let proxyObj = {};proxyObj['/'] = {//websocketws: false,//目标地址target: 'http://localhost:8081',//发送请求头中host会设置成targetchangeOrigin: true,//不重写请求地址pathRewrite: {'^/': '/'}
};// websocket的代理proxyObj['/ws'] = {ws: true,target: 'ws://localhost:8081'
};module.exports = {devServer: {host: 'localhost',port: 8080,proxy: proxyObj},configureWebpack: {devtool: 'source-map'}
};

本人采用第二种方法，完美解决问题！

前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-相关推荐

前后端分离跨域问题解决方案
问题因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111 ...
pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案
跨域问题存在的原因跨域问题的根本原因:因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性.什么叫做同源策略?就是不同的域名, 不同端口, 不同的协议不允许共享资源的,保障浏览器安全 ...
【python学习笔记】关于python Flask前后端分离跨域问题
关于python Flask前后端分离跨域问题前后端分离过程中,前后端对接测试难免遇到跨域问题.因为是个新司机,所以在我经过一天的测试,才找到解决办法=-= 第一种方法 from functools ...
Springboot整合Shiro前后端分离跨域问题
Springboot整合Shiro前后端分离跨域问题前言:SpringBoot整合shiro进行前后端分离开发时(前端是Vue),项目做了跨域配置,但还是前端请求会出现cros err–显示的跨域问 ...
nginx处理前后端分离跨域问题
在微服务中,通常会使用前后端分离的方式进行开发和部署.由于前后端分开部署,属于不同的"资源",因此前端调用后端API时可能会出现跨域问题,Cross-Origin Resource ...
cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结
前言前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合,但是由于这 ...
cors 前后端分离跨域问题_SpringBoot 实现前后端分离的跨域访问（CORS）
序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍简单来说,CORS ...
nginx配置反向代理解决前后端分离跨域问题
2019独角兽企业重金招聘Python工程师标准>>> 摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server {listen 80 ...
Nginx的简单使用，配置多前端，多端口【微信小程序+前后端分离跨域解决】
微信小程序微信小程序需要服务器要有域名,不能有端口,但是我还有一个WebSocket的wss协议路径需要填,都是后台的示例配置文件,配置https转发http,配置https转发wss user ...

最新文章

热门文章