【CORS】前端、后端 跨域配置

1. 前言

在这里强烈建议每个人通读一下 MDN 的 HTTP访问控制 HTTP 访问控制 ，这篇图文并茂的文章可以解决跨域百分之八十的疑惑。

2. 前端配置

2.1 vite 中配置

export default defineConfig({
server: {cors: true,// 允许跨域proxy: {'/api': {target: '后端服务地址',changeOrigin: true,ws: true, // 允许websocket代理// rewrite: ( path ) => path.replace(new RegExp('^/api'), '')rewrite: (path) => path.replace(/^\\/api/, '')}}},})

3. 后端配置

3.1 Nginx

location ^~ /api {proxy_set_header Origin '';add_header Access-Control-Allow-Credentials true;add_header Access-Control-Allow-Headers $http_access_control_request_headers;add_header Access-Control-Allow-Methods POST,GET,OPTIONS,DELETE,PUT,HEAD,PATCH;add_header Access-Control-Allow-Origin $http_origin;add_header Access-Control-Expose-Headers $http_access_control_request_headers;if ($request_method = 'OPTIONS') {return 204;}if ($request_method != 'OPTIONS'){proxy_pass "你的项目地址";}
}

3.2 Java

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class HttpErrorResponseUtil {public static void setResponeCorsHeader(HttpServletRequest request, HttpServletResponse response) {response.addHeader("Access-Control-Allow-Credentials", "true");response.addHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE,PUT,HEAD,PATCH");response.addHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));response.addHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));}
}

在别的语言中方法也大同小异，最重要的是 Access-Control-Allow-Origin 、Access-Control-Allow-Headers、Access-Control-Allow-Methods 头的相应设置。