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

目录

1.什么是跨域？

2.跨域访问示例 

3.如何解决跨域问题？ 

3.1方法一：注解

3.2方法二：实现 WebMvcConfigurer

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

---

1.什么是跨域？

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

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

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

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);
 
  })})；
 

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

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 配置解决跨域问题

先上图：

首先我们用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项目和后端接口项目放到一个域中，这样就不存在跨域问题，然后根据请求地址去请求不同服务器（真正干活的服务器）；