什么是跨域？跨域问题如何解决？看完豁然开朗。

向右看齐 2024-04-06 11:03 59阅读 0赞

**目录**

1.什么是跨域？

2.跨域访问示例

3.如何解决跨域问题？

3.1方法一：注解

3.2方法二：实现 WebMvcConfigurer

3.3方法三：Nginx 配置解决跨域问题

--------------------

## 1.什么是跨域？ ##

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是**浏览器的限制**。理解这一点很重要！！！

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

![49be71be901c4cdbb94cc0f4553d4036.png][]

## 2.跨域访问示例 ##

假设有两个网站，A网站部署在：http://localhost:81 即本地ip端口81上；B网站部署在：http://localhost:82 即本地ip端口82上。现在A网站的页面想去访问B网站的信息，A网站页面的代码如下（这里使用jquery的异步请求）

$(function (){
    
        $.get("http://localhost:82/api/values", {},function (result) {
    
              $("#show").html(result);
    
      })})；

![d4472be6669c4b63bf6eb1f480575a8b.png][]

从错误信息可以看出以上出现了跨域问题！

## 3.如何解决跨域问题？ ##

### 3.1方法一：注解 ###

在Spring Boot 中给我们提供了一个注解 @CrossOrigin 来实现跨域，这个注解可以实现方法级别的细粒度的跨域控制。我们可以在类或者方添加该注解，如果在类上添加该注解，该类下的所有接口都可以通过跨域访问，如果在方法上添加注解，那么仅仅只限于加注解的方法可以访问。

### 3.2方法二：实现 WebMvcConfigurer ###

这里可以通过实现 WebMvcConfigurer 接口中的 addCorsMappings() 方法来实现跨域。

*  addMapping：配置可以被跨域的路径，可以任意配置，可以具体到直接请求路径。
 *  allowedOrigins：允许所有的请求域名访问我们的跨域资源，可以固定单条或者多条内容，如："http://www.baidu.com"，只有百度可以访问我们的跨域资源。
 *  allowCredentials： 响应头表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以
 *  allowedMethods：允许输入参数的请求方法访问该跨域资源服务器，如：POST、GET、PUT、OPTIONS、DELETE等。
 *  allowedHeaders：允许所有的请求header访问，可以自定义设置任意请求头信息，如："X-YAUTH-TOKEN"
 *  maxAge：配置客户端缓存预检请求的响应的时间(以秒为单位)。默认设置为1800秒(30分钟)。

import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /**
     * 跨域配置
     *
     * @author Run
     */
    @Configuration
    public class WebAppConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            // 设置允许跨域的路径
            registry.addMapping("/**")
                    // 设置允许跨域请求的域名
    //                .allowedOrigins("*")
                    .allowedOriginPatterns("*")
                    // 是否允许证书
                    .allowCredentials(true)
                    // 设置允许的方法
                    .allowedMethods("GET", "POST", "DELETE", "PUT")
                    // 设置允许的header属性
                    .allowedHeaders("*")
                    // 跨域允许时间
                    .maxAge(3600);
        }
    }

### 3.3方法三：Nginx 配置解决跨域问题 ###

先上图：

![d422fcb0e9e94cb3989a6e347507b7a2.png][]

首先我们用nginx作为代理服务器和用户交互，这样用户就只需要在80端口上进行交互就可以了，这样就避免了跨域问题，因为我们都是在80端口上进行交互的；

下面我们看一下利用nginx作为反向代理的具体配置：

server {
    
            listen      80; #监听80端口，可以改成其他端口
    
            server_name  localhost; # 当前服务的域名
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
    
                proxy_pass http://localhost:81;
    
                proxy_redirect default;
    
            }
    
    location /apis { #添加访问目录为/apis的代理配置
    
    rewrite  ^/apis/(.*)$ /$1 break;
    
    proxy_pass  http://localhost:82;
    
          }

1.当用户发送localhost:80/时会被nginx转发到http://localhost:81服务；

2.当界面请求接口数据时，只要以/apis 为开头，就会被nginx转发到后端接口服务器上；

总结：nginx实现跨域的原理，实际就是把web项目和后端接口项目放到一个域中，这样就不存在跨域问题，然后根据请求地址去请求不同服务器（真正干活的服务器）；

[49be71be901c4cdbb94cc0f4553d4036.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5de7800fce424842a03a4467ae3e4d6c.png
[d4472be6669c4b63bf6eb1f480575a8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/19c19ec8fbd9474d80bf21870c870429.png
[d422fcb0e9e94cb3989a6e347507b7a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cf9b91d4b663446da0011440318e98f8.png