目录

1 同源策略

2 什么是跨域

3 如何解决跨域

3.1 配置CROS

 3.2 Nginx解决跨域问题

1 同源策略

        跨域是指浏览器不能执行其他网站的脚本，是由浏览器的同源策略造成的，是浏览器加的安全限制。同源是指，域名，协议，端口均相同

2 什么是跨域

当请求的url和当前页面的url在域名、协议、端口三者之间有一个不相同就会产生跨域问题。

3 如何解决跨域

这里介绍平时最常用的两种跨域解决方式 1配置CROS 2配置nginx

没有进行配置之前的代码：

前端代码：

跨域测试test1

后端代码：

@RestController
public class LoginController {@GetMapping("/test/cros")public String testCros(){return "测试解决跨域问题";}
}

直接在idea中打开浏览器访问：

 结果：出现跨域问题如下

3.1 配置CROS

前端代码不变、后端代码配置CROS，设置一个过滤器。

配置过滤器：

package com.liubujun.springbootinterceptor.filter;import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.RequestMethod;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @Author: liubujun* @Date: 2022/10/16 19:26*/@WebFilter("/*")
public class MyFilterOne implements Filter {/*** web应用启动时，web服务器将创建Filter的实例对象，并调用init方法，读取web.xml的配置，完成对象的初始化功能，* 从而为后续的用户请求做好拦截的准备工作（filter对象只会创建一次，init方法也只会执行一次，开发人员通过init的参数，* 可或得代表当前filter配置信息的FilterConfig对象）* @param filterConfig* @throws ServletException*/@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}/*** 这个方法完成实际的过滤操作，当客户请求访问与过滤器相关联的URL的时候，Servlet过滤器将先执行doFilter方法，FilterChain参数用于访问后续过滤器* @param servletRequest* @param servletResponse* @param filterChain* @throws IOException* @throws ServletException*/@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {System.out.println("我是过滤器，我进来了");HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;HttpServletRequest request = (HttpServletRequest) servletRequest;httpResponse.addHeader("Access-Control-Allow-Origin", "*");httpResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");httpResponse.addHeader("Access-Control-Max-Age", "3600");httpResponse.addHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));httpResponse.addHeader("Access-Control-Allow-Credentials", "true");if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {httpResponse.setStatus(HttpStatus.OK.value());return;}filterChain.doFilter(servletRequest, servletResponse);}/*** filter创建后会保存在内存中，当web应用移除或者服务器停止时才销毁，该方法在Filter的生命周期中仅执行一次，在这个方法中，可以释放过滤器使用的资源*/@Overridepublic void destroy() {}
}

启动类：

@SpringBootApplication
@ServletComponentScan
public class SpringbootInterceptorApplication {public static void main(String[] args) {SpringApplication.run(SpringbootInterceptorApplication.class, args);}
}

直接在浏览器打开：

 结果没有出现跨域问题

 3.2 Nginx解决跨域问题

打开自己nginx下的nginx.conf文件，向其中加入如下代码

    server {listen       8000;server_name  localhost;# / 表示匹配路径为/的urllocation / {proxy_pass http://localhost:9999;}# /user 表示访问以/test 开头 的地址 如/testname,/test/find等location /test {proxy_pass http://localhost:9999;}}

然后启动nginx：

前端代码也要做相应的修改： 

然后在浏览器端输入地址直接访问：http://localhost:8000/test/cros

就会转发成http://localhost:9999/test/cros