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.