【问题解决篇】前后端分离项目跨域问题:Access to XMLHttpRequest at ‘xx‘ from origin ‘xx‘ has been blocked by CORS policy

目录

文章目录

1. 跨域报错页面

2. 报错原因

3. 常用解决方法

3.1 方法一 使用配置类实现跨域过滤器

3.2 方法二  JSONP方式解决跨域


文章目录

1. 跨域报错页面

浏览器按下F12可以在控制台看见类似:

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

2. 报错原因

原因是:

基于浏览器的同源策略,去判断是否跨域请求,同源策略是浏览器的一种安全机制,从一个地址请求另一个地址,如果协议、主机、端口三者全部一致则不属于跨域,否则有一个不一致就是跨域请求。

例如:

http://localhost:8601  到   http://localhost:8602  由于端口不同,是跨域。

http://192.168.101.10:8601  到   http://192.168.101.11:8601  由于主机不同,是跨域。

http://192.168.101.10:8601  到   https://192.168.101.10:8601  由于协议不同,是跨域。

3. 常用解决方法

3.1 方法一 使用配置类实现跨域过滤器

在咱们的项目下面创建一个config包,在config包下编写GlobalCorsConfig.java,其代码内容在下方,完成后记得重启项目!!!

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;


 @Configuration
 public class GlobalCorsConfig {

  /**
   * 允许跨域调用的过滤器
   */
  @Bean
  public CorsFilter corsFilter() {
   CorsConfiguration config = new CorsConfiguration();
   //允许白名单域名进行跨域调用
   config.addAllowedOrigin("*");
   //允许跨越发送cookie
   config.setAllowCredentials(true);
   //放行全部原始头信息
   config.addAllowedHeader("*");
   //允许所有请求方法跨域调用
   config.addAllowedMethod("*");
 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   source.registerCorsConfiguration("/**", config);
   return new CorsFilter(source);
  }
 }

3.2 方法二  JSONP方式解决跨域

JSONP(JSON with Padding)是一种利用<script>标签不受同源策略限制的特点来实现跨域数据获取的方法。通过 script 标签的 src 属性 进行跨域请求,如果服务端要响应内容则首先读取请求参数callback的值,callback是一个回调函数的名称,服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。

Access to XMLHttpRequest at指的是浏览器允许通过XMLHttpRequest对象向源服务器发起请求的能力。这是通过CORS源资源共享)机制实现的。CORS允许浏览器在AJAX请求中克服同源策略的限制,使得从其他名获取数据成为可能。 CORS相比于传统的AJAX请求有一些优点。首先,它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制,可以向源服务器发出请求。其次,CORS的兼容性更好,可以在更古老的浏览器中运行,不需要XMLHttpRequest或ActiveX的支持。最后,CORS请求在完成后可以通过回调方式将结果返回给调用方。 下面是一个浏览器的JavaScript脚本示例,展示了如何使用XMLHttpRequest对象进行CORS请求: var url = 'http://api.alice.com/cors'; var xhr = new XMLHttpRequest(); xhr.open('PUT', url, true); xhr.setRequestHeader('X-Custom-Header', 'value'); xhr.send(); 在这个例子中,JavaScript代码通过XMLHttpRequest对象向'http://api.alice.com/cors'发起PUT请求,并设置了一个自定义的请求头。请求发送后,服务器会接收请求并返回响应结果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Access to XMLHttpRequest at ‘http://xxfrom origin ‘http://xxhas been blocked by CORS policy:](https://blog.youkuaiyun.com/qq_43437874/article/details/120565996)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值