解决nginx和gateway网关跨域问题Access to XMLHttpRequest

一、为什么会出现跨域问题？

1、什么是跨域

跨域(Cross-Origin Resource Sharing,简称 CORS)

主要是浏览器的同源策略导致的。

同源策略要求浏览器发出的 AJAX 请求只能发给与请求页面域名相同的 API 服务器,如果发给其他域名就会产生跨域问题。

2、什么是同源策略？

所谓同源（即指在同一个域）就是两个地址具有相同的协议（protocol）、主机（host）和端口号（port）

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

同源策略限制以下行为

1. Cookie、LocalStorage 和 IndexDB 无法读取

2. DOM 和 Js对象无法获得

3. AJAX 请求不能发送

注意：跨域限制是浏览器的机制，如果直接在服务端请求，是不会触发跨域限制的。

3、以下情况都属于跨域：

跨域原因说明	示例
域名不同	www.jd.com 与 www.taobao.com
域名相同，端口不同	www.jd.com:8080 与 www.jd.com:8081
二级域名不同	item.jd.com 与 miaosha.jd.com

http和https也属于跨域。

如果域名和端口都相同，但是请求路径不同，不属于跨域，如：www.jd.com/item 和 www.jd.com/goods

同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

发起ajax请求的那个页面的地址（localhost:5500） 和 ajax请求接口地址（localhost:8080） 不在同一个域中。

而我们刚才是从localhost:5500端口去访问localhost:8080端口，这属于端口不同，跨域了。

二、解决nginx跨域问题

Spring早就给我们提供了解决方案，我们只需要在对应controller上添加一个注解就可以了

我们在 UserController 类上添加跨域标签@CrossOrigin，再进行测试，则测试成功！

@CrossOrigin //解决跨域问题

三、解决gateway网关跨域问题

在网关服务中添加跨域配置

package com.atguigu.srb.gateway.config;
@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); //是否允许携带cookie
      // config.addAllowedOrigin("*"); //可接受的域，是一个具体域名或者*（代表任意域名）
        // springboot升级成2.4.0以上时对AllowedOrigin设置发生了改变，不能有”*“,可以替换成AllowedOriginPattern
        config.addAllowedOriginPattern("*");
        config.addAllowedHeader("*"); //允许携带的头
        config.addAllowedMethod("*"); //允许访问的方式
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}