如何解决跨域问题，No ‘Access-Control-Allow-Origin‘ header

太过爱你忘了你带给我的痛 2022-11-10 03:43 151阅读 0赞

## 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向一个不同的域请求数据，只要协议、域名、端口有任何一个不同，都被当作是不同的域，浏览器就不允许跨域请求。

*  跨域的几种常见情况：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70][]

## 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.验证 ##

再次查询，解决跨域问题之后,页面显示数据。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70]: /images/20221023/27601e7e2ddb4b22a1224a791f246992.png