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

本文主要是介绍Access to XMLHttpRequest at ‘httpxxxx‘ from origin ‘httpxxxx‘ has been blocked by CORS policy，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

解决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)所致
• 解决方案

  1. 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("*");}
     }
     

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

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

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

这篇关于Access to XMLHttpRequest at ‘httpxxxx‘ from origin ‘httpxxxx‘ has been blocked by CORS policy的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---