跨域问题 | Rewind

发布日期: 2021-01-17

一、报错

No 'Access-Control-Allow-Origin' header is present on the requested resource.

二、跨域问题产生原因

浏览器通过一个地址去访问另一个地址时，如果以下三项存在任一不同，即产生跨域：

协议 http/https
ip地址
端口号

备注：

端口和协议的不同，只能通过后台来解决
localhost和127.0.0.1虽然都指向本机，但也属于跨域

三、CORS

问题背景：

Same Origin Policy，译为“同源策略”。它是对于客户端脚本（尤其是JavaScript）的重要安全度量标准，其目的在于防止某个文档或者脚本从多个不同“origin”（源）装载。

它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

注：具有相同的Origin，也即是拥有相同的协议、主机地址以及端口。一旦这三项数据中有一项不同，那么该资源就将被认为是从不同的Origin得来的，进而不被允许访问。

CORS就是为了解决SOP问题而生的，当然CORS不是唯一的解决方案，不过这里不赘述其他解决办法了。

不安全的场景

假设浏览器打开了A、B两个页面，并进行了登录，当A页面有一个AJAX或其他的请求到B的服务器时，会携带B页面登录cookie，所以可能A 网站可通过这种方式窃取B服务器的信息。

跨域仅在浏览器和服务器之间生效，不会在服务器之间生效。

CORS简介:

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。它的通信过程，都是浏览器自动完成，不需要用户参与。

对于开发者来说，CORS通信与同源的AJAX/Fetch通信没有差别，代码完全一样。浏览器一旦发现请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。

浏览器发出CORS非简单请求，会在正式通信之前，增加一次OPTIONS查询请求，称为”预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

简单请求就是HEAD、GET、POST请求，并且HTTP的头信息不超出以下几种字段 Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type 注：Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

反之，就是非简单请求。

其实实现CORS很简单，就是在服务端加一些响应头，并且这样做对前端来说是无感知的，很方便。

详解响应头：

Access-Control-Allow-Origin 该字段必填。它的值要么是请求时Origin字段的具体值，要么是一个*，表示接受任意域名的请求。

Access-Control-Allow-Methods 该字段必填。它的值是逗号分隔的一个具体的字符串或者*，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。

Access-Control-Expose-Headers 该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

Access-Control-Allow-Credentials 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie.默认情况下，不发生Cookie，即：false。对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json，这个值只能设为true。如果服务器不要浏览器发送Cookie，删除该字段即可。

Access-Control-Max-Age 该字段可选，用来指定本次预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求。

顺便提一下，如果在开发中，发现每次发起请求都是两条，一次OPTIONS，一次正常请求，注意是每次，那么就需要配置Access-Control-Max-Age，避免每次都发出预检请求。

四、后端四种解决方法

1、配置CorsFilter过滤器

@Configuration
public class CorsConfig  {

   private CorsConfiguration corsConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 请求常用的三种配置，*代表允许所有，当时你也可以自定义属性（比如header只能带什么，只能是post方式等等）
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setMaxAge(3600L);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfig());
        return new CorsFilter(source);
    }
}

2、配置类配置

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

但是使用此方法配置之后再使用自定义拦截器时跨域相关配置就会失效。

原因是请求经过的先后顺序问题，当请求到来时会先进入拦截器中，而不是进入Mapping映射中，所以返回的头信息中并没有配置的跨域信息。浏览器就会报跨域异常。

正确的解决跨域问题的方法是使用第一种方法：CorsFilter过滤器。

3、过滤器

import org.springframework.context.annotation.Configuration;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "CorsFilter ")
@Configuration
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }
}

这种办法，是基于过滤器的方式，方式简单明了，就是在response中写入这些响应头，好多文章都是第二种和第三种方式都叫你配置，其实这是没有必要的，只需要一种即可。但如果一个不能用，可以试试2个。

4、注解

@RestController
@RequestMapping("/test")
public class GoodsController {
    @CrossOrigin
    @GetMapping("goods-url")
    public Response queryGoodsWithGoodsUrl(@RequestParam String goodsUrl)  {

    }


    @PostMapping("/test1")
    public String test1(HttpServletResponse response){
        // @CrossOrigin 的原理其实就是添加响应头
        // 允许所有请求跨域
        //response.addHeader("Access-Control-Allow-Origin","*");
        // 允许指定地址的请求跨域
        response.addHeader("Access-Control-Allow-Origin","http://localhost:8080");

        return "访问成功";
    }
}

从元注解@Target可以看出，注解可以放在method、class等上面，类似RequestMapping，也就是说，整个controller下面的方法可以都受控制，也可以单个方法受控制。

同时也可通过参数设置允许跨域的路径

@CrossOrigin(origins = {"http://localhost:8080"})

也可以得知，这个是最小粒度的cors控制办法了，精确到单个请求级别。

以上三种方法都可以解决问题，最常用的应该是第一种、第二种，控制在自家几个域名范围下足以，一般没必要搞得太细。

5、java反向代理

原理：这种方式是用于访问第三方接口出现跨域时出现的跨域问题，在本文三的不安全场景中提到，跨域问题只出现在浏览器和服务器之间，所以先将前端请求发送到本项目的后端，在由后端去请求其他服务器接口。

请求发送端

配置文件，配置目标服务器地址

proxy.address=http://127.0.0.1:9002

配置类

如果不是用 RestTemplate 发送 http 请求可不配置

@Configuration
public class MyConfig {
    @Bean
    public RestTemplate restTemplate(RestTemplateBuilder builder){
        return builder.build();
    }
}

java 代理

@GetMapping("/api/**")
public Object proxy(HttpServletRequest request){
    System.out.println(address);
    return restTemplate.getForObject(
        address+request.getRequestURI().replace("/api","")
        ,Object.class);
}

前端请求

    function kuayu() {
        $.get("http://127.0.0.1:9001/api/test/test1",function (res) {
            alert("访问成功")
            console.log(res)
        })
    }

正向代理与反向代理

区别：

正向代理直接请求目标服务器，请求被代理

反向代理则是请求代理服务器

五、nginx解决跨域

原理：与java的反向代理差不多

nginx作为代理服务器，进行请求的转发

并配置代理转发

server{
        listen 8888;    #监听端口
        server_name  localhost;

        location /{        #匹配路径
            proxy_pass http://localhost:8080;    #转发地址
        }

        location /api{
            proxy_pass http://localhost:8081;
        }

        location ~ /eduservice {    #正则匹配，~为区分大小写，~*为不区分大小写。
            #root path;  #根目录
            #index vv.txt;  #设置默认页
            deny 127.0.0.1;  #拒绝的ip
            allow 172.18.5.54; #允许的ip    
            proxy_pass http://localhost:8082;
        }
    }

六、前端引入第三方资源跨域

当前端 https 请求 http 时会出现跨域问题，导致第三方资源无法引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=****&callback=initMap"></script>

解决方式：在页面的header中加入以下代码，意思是自动将http的不安全请求升级为https

注意：在需要的网页上加上面的语句，

其它不需要的网页不需要加，不然后了出错的。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

七、RestTemplate

RestTemplate 是从 Spring3.0 开始支持的一个 HTTP 请求工具，它提供了常见的REST请求方案的模版，例如 GET 请求、POST 请求、PUT 请求、DELETE 请求以及一些通用的请求执行方法 exchange 以及 execute。RestTemplate 继承自 InterceptingHttpAccessor 并且实现了 RestOperations 接口，其中 RestOperations 接口定义了基本的 RESTful 操作

*ForObject 方法和 *ForEntity 区别

post请求：postForObject 方法和 postForEntity，以下以get请求为例

getForObject 方法和 getForEntity 方法类似，getForObject 方法也有三个重载的方法，参数和 getForEntity 一样，因此这里我就不重复介绍参数了，这里主要说下 getForObject 和 getForEntity 的差异，这两个的差异主要体现在返回值的差异上， getForObject 的返回值就是服务提供者返回的数据，使用 getForObject 无法获取到响应头。

0、注册bean

@Configuration
public class MyConfig {
    @Bean
    public RestTemplate restTemplate(RestTemplateBuilder builder){
        return builder.build();
    }
}

1、get

api

// 参数:请求路径、返回值类型、请求参数
public <T> ResponseEntity<T> getForEntity(String url, Class<T> responseType, Object... uriVariables){...}

public <T> ResponseEntity<T> getForEntity(String url, Class<T> responseType, Map<String, ?> uriVariables) throws RestClientException{...}

public <T> ResponseEntity<T> getForEntity(URI url, Class<T> responseType) throws RestClientException {...}

使用案例

@Resource
private RestTemplate restTemplate;

@GetMapping("/test2")
public String test2(){
    String url = "http://127.0.0.1:9002/http/test1";
    HashMap<String, String> params = new HashMap<>();
    params.put("name","张三");
    // 发送http请求
    ResponseEntity<String> response = restTemplate.getForEntity(url, String.class, params);

    // 处理响应
    HttpStatus code = response.getStatusCode();     //200 OK
    int codeValue = response.getStatusCodeValue();  //200
    boolean b = response.hasBody();                 //true
    String body = response.getBody();
    HttpHeaders headers = response.getHeaders();
}

2、post

api

// 参数:请求路径、request可为空、返回值类型、请求参数
public <T> ResponseEntity<T> postForEntity(
    String url, 
    @Nullable Object request,
    Class<T> responseType, 
    Map<String, ?> uriVariables) 
            throws RestClientException {...}

public <T> ResponseEntity<T> postForEntity(
    URI url, 
    @Nullable Object request, 
    Class<T> responseType)
            throws RestClientException {...}

BUG处理

阿里云上传图片超时问题

2021-01-20 BUG处理

BUG处理

vue

2021-01-15 前端

前端