解决CORS跨域问题

今天做前后端分离的项目时, 前端向后台发送请求发现报错: Access to XMLHttpRequest at ‘http://localhost:8082/doLogin’ from origin ‘http://localhost:8080’ has been 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.
问题分析: 从报错信息可以知道是由于CORS(Cross-origin resource sharing)所致

解决方案

SpringBoot项目解决方案

/*** 解决异步访问跨域*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {//本应用的所有方法都会去处理跨域请求registry.addMapping("/**")//允许远端访问的域名.allowedOrigins("http://localhost:8080")//允许请求的方法("POST", "GET", "PUT", "OPTIONS", "DELETE").allowedMethods("*")//允许请求头.allowedHeaders("*");}
}

SpringBoot+Spring Security项目解决方案(在以上代码的基础上)

protected void configure(HttpSecurity http) throws Exception {http.authorizeRequests()....cors().and()...
}

Vue-cli前端解决(新建vue.config.js并在main.js中引入)

const proxyObj = {}
proxyObj['/'] = {target: 'http://localhost:8085',changeOrigin: true,pathRewrite: {'^/': ''}
}
module.exports = {devServer: {host: 'localhost',port: 8080,proxy: proxyObj}
}

延伸拓展

同源策略:
1. 概念: 要求协议、域名以及端口要相同,才能进行请求和响应
2. 作用: 网络请求更安全, 并且所有支持JavaScript的浏览器都支持的安全策略
如果不支持可能造成的问题
1. 不良分子会利用登录时用户的信息进行不当操作
2. 举例: 点击恶意链接中包含<img src="http://xxx.com/pay?xxx=xx"> , 就会把自己的重要信息泄漏.

Access to XMLHttpRequest at ‘httpxxxx‘ from origin ‘httpxxxx‘ has been blocked by CORS policy相关推荐

Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Contr
Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Contr ...
Access to XMLHttpRequest at file from origin ‘null‘ has been blocked by CORS policy谷歌浏览器本地打开项目js文件报错
Access to XMLHttpRequest at 'file:///xxxxx/PQ.BaseInfo.proto' from origin 'null' has been blocked by ...
Access to XMLHttpRequest at ‘XXX‘ from origin ‘XX‘ has been blocked by CORS policy: No ‘Access-Contr
加一个crossDomain: true,即可示例代码: <!DOCTYPE html> <html lang="en" dir="ltr" ...
Access to script at ‘xxx‘ from origin ‘null‘ has been blocked by CORS policy: Cross origin requests
前言本地调试js时,遇到本错误 Google Chrome 84.0.4147.135 (正式版本) (64 位) (cohort: Stable Installs Only) 修订版本 c42bd ...
解决浏览器跨域加载本地文件报错 Access to script at ‘xxx‘ from origin ‘null‘ has been blocked by CORS policy
报错: Failed to load resource: net::ERR_FILE_NOT_FOUND Access to script at 'xxx' from origin 'null' ha ...
解决 ES6 Module 报 Access to script at ‘xx‘ from origin ‘null‘ has been blocked by CORS policy
一.问题说明在学习 JavaScript ES6 中 Module 部分时,使用 script 标签加载 ES6,代码报错.报错信息如下: 试验代码如下: 二.问题追溯 1.本地打开文件,引用模块为 ...
Access to script at ‘file:///C:/study...‘ from origin ‘null‘has been blocked by CORS policy
Access to script at 'file:///C:/study/vite-project/dist/assets/index.d3de8eba.js' from origin 'null' ...
【VSCode】from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported
Access to script at 'file:///C:/Users/dawulei/Desktop/%E9%A1%B9%E7%9B%AE/%E5%9D%A6%E5%85%8B%E5%A4%A7 ...
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...
跨源资源请求问题解决方案问题描述:当我们在vsCode中使用 open in brower插件打开html文件文件时,就会报错 xxx已被CORS策略阻止,引入的资源还会失效. 解决办法1 :Liv ...
解决直接打开 vite +vue3 打包的 HTML 文件报错跨域 from origin ‘null‘ has been blocked by CORS policy
问题原因 vite 是直接使用原生 ES6 模块打包的 <script type="module" />(是让浏览器接管了打包程序的部分工作),然而 ES6 模块遵循 ...

Access to XMLHttpRequest at ‘httpxxxx‘ from origin ‘httpxxxx‘ has been blocked by CORS policy

解决CORS跨域问题

延伸拓展

Access to XMLHttpRequest at ‘httpxxxx‘ from origin ‘httpxxxx‘ has been blocked by CORS policy相关推荐

最新文章

热门文章