跨域问题解决

1. 出现跨域问题

当我们在前端项目中,向后端发送请求的获取课程数据的时候,出现了跨域问题：

已被CORS策略阻止：请求的资源上没有' Access-Control-Allow-Origin'标头（跨域请求失败）

Access to XMLHttpRequest at 'http://localhost:8080/lagou_edu_home/course? methodName=findCourseList' from origin 'http://localhost:8088' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 2. 什么是跨域

跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，只要协  议、域名、端口有任何一个不同，都被当作是不同的域,浏览器就不允许跨域请求。

跨域的几种常见情况

3. 解决跨域问题

跨域的允许主要由服务器端控制。服务器端通过在响应的 header 中设置Access-Control-Allow-Origin及相关一系列参数，提供跨域访问的允许策略。

设置响应头中的参数来允许跨域域请求：

• Access-Control-Allow-Credentials
• Access-Control-Allow-Origin 标识允许跨域的请求有哪些

在POM文件中引入依赖

<!-- 解决跨域问题所需依赖 -->

<dependency>

<groupId>com.thetransactioncompany</groupId>

<artifactId>cors-filter</artifactId>

<version>2.5</version>

</dependency>

在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>

问题解决

节选自拉钩教育JAVA系列课程