1.出现跨域问题
当我们在前端项目中,向后端发送请求的获取课程数据的时候,出现了跨域问题:
- 已被CORS策略阻止:请求的资源上没有' Access-Control-Allow-Origin'标头(跨域请求失败)
报错示例:
Access to XMLHttpRequest at 'http://localhost:8080/demo/getUserList' from origin 'http://localhost:8088' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
在运行前端项目的时候,F12 调试,看console的打印,看到“Access-Control-Allow-Origin”这个关键信息,就说明是跨域问题了。
2. 什么是跨域
那什么是跨域呢?
跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,只要协议、域名、端口有任何一个不同,都被当作是不同的域,浏览器就不允许跨域请求。
- 跨域的几种常见情况:
3.解决跨域问题
跨域的允许主要由服务器端控制。服务器端通过在响应的 header 中设置 Access-Control-Allow-Origin 及相关一系列参数,提供跨域访问的允许策略
- 设置响应头中的参数来允许跨域域请求:
- Access-Control-Allow-Credentials
Access-Control-Allow-Origin 标识允许跨域的请求有哪些
1. 在POM.xml 文件中引入依赖
<!-- 解决跨域问题所需依赖 -->
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>2.5</version>
</dependency>
2. 在web.xml中 配置跨域 filter
<!--配置跨域过滤器-->
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
4.验证
再次查询,解决跨域问题之后,页面显示数据。
更多推荐
如何解决跨域问题,No ‘Access-Control-Allow-Origin‘ header
发布评论