Intro

在本地做前后端联调的时候，几乎避不开的问题：跨域资源访问 CORS
最简单，也最管用的方式就是：让后端开发去修改服务端代码的逻辑(跨域请求访问规则)，重启应用。哪怕只是本地联调临时的呢。

那么，问题就从“如何解决跨域资源访问？”
变成了：“后端开发如何修改跨域请求访问规则？”

不考虑服务端使用的语言/框架等，要做的事其实是修改以下几个 HTTP响应头 的值。

Access-Control-Allow-Origin
Access-Control-Allow-Expose-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Allow-Max-Age  其实这个头设置不设置不影响前后端联调的。

而如果后端使用的是 SpringBoot 框架，如何快速修改多个web接口的响应头规则呢？
加一个 过滤器Filter 即可：

Code

方便复制，以下代码见 https://gitee.com/wuyujin1997/ms-demo/commit/f50309da256becfea0c9c4e4cfa103daeae9314a

package com.wuyujin.msdemo.config;

import io.swagger.models.HttpMethod;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Order(1)
@Configuration
@WebFilter(urlPatterns = "/*")
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        if (servletRequest instanceof HttpServletRequest) {
            HttpServletRequest request = (HttpServletRequest) servletRequest;
            HttpServletResponse response = (HttpServletResponse) servletResponse;
            System.out.println("跨域请求 URL: " + request.getRequestURL());

            // 重点，这5个响应头的值决定跨域资源请求的访问规则。
            // 你也可以按自己的需求去设置值，而不是全部设置为通配符 *
            // NOTE： 通配符设置不可以用于生产环境！！除非你的服务端借口本来就是给所有人直接调用的。
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Expose-Headers", "*");
            response.setHeader("Access-Control-Allow-Methods", "*");
            response.setHeader("Access-Control-Allow-Headers", "*");
            response.setHeader("Access-Control-Allow-Max-Age", "*");

            String method = request.getMethod();
            if (HttpMethod.OPTIONS.name().equalsIgnoreCase(method)) {
                System.out.printf("%s %s\r\n", method, request.getRequestURI());
                String path = request.getServletPath() + request.getPathInfo();
                request.getRequestDispatcher(path).forward(servletRequest, servletResponse);
            } else {
                filterChain.doFilter(request, servletResponse);
            }
        }
    }

}

Refer

Filter - JavaWeb三大组件之一(Servlet, Filter, Listener)

这个自己去复习。

文中涉及到的响应头

如何搜索前端的知识点

自己百度/bing/Google， 搜索前端知识点(文档)的时候带上MDN:

自己看文档：这个 HTTP response header 是干什么的？值可以如何设置值？……

• Access-Control-Allow-Origin

The Access-Control-Allow-Origin response header indicates whether the response can be shared with requesting code from the given origin.
就是看origin头的值是否在允许的origin范围内。以此决定改请求是否被响应。

后面几个响应头建议自己挨个去搜索，翻译，整理一下。

• Access-Control-Allow-Expose-Headers

The Access-Control-Allow-Headers response header is used in response to a preflight request which includes the Access-Control-Request-Headers to indicate which HTTP headers can be used during the actual request.
This header is required if the request has an Access-Control-Request-Headers header.

• Access-Control-Allow-Methods

The Access-Control-Allow-Methods response header specifies one or more methods allowed when accessing a resource in response to a preflight request.
就是限定一下请求方法的范围：哪些请求方法过来，我后端对你提供服务/让你访问？哪些不让？

• Access-Control-Allow-Headers

The Access-Control-Allow-Headers response header is used in response to a preflight request which includes the Access-Control-Request-Headers to indicate which HTTP headers can be used during the actual request.
This header is required if the request has an Access-Control-Request-Headers header.

• Access-Control-Allow-Max-Age

The Access-Control-Max-Age response header indicates how long the results of a preflight request (that is the information contained in the Access-Control-Allow-Methods and Access-Control-Allow-Headers headers) can be cached.

• origin

The Origin request header indicates the origin (scheme, hostname, and port) that caused the request. For example, if a user agent needs to request resources included in a page, or fetched by scripts that it executes, then the origin of the page may be included in the request.

• preflight

A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers.

It is an OPTIONS request, using three HTTP request headers: Access-Control-Request-Method, Access-Control-Request-Headers, and the Origin header.

A preflight request is automatically issued by a browser and in normal cases, front-end developers don’t need to craft such requests themselves. It appears when request is qualified as “to be preflighted” and omitted for simple requests.