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

最新推荐文章于 2025-06-11 08:22:19 发布

CODER-V

最新推荐文章于 2025-06-11 08:22:19 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：其他技术文章标签： servlet java 开发语言

本文链接：https://blog.csdn.net/qq_45872039/article/details/130226106

其他技术专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何通过MDN的HTTP访问控制来解决跨域问题，提供了在Vite中设置CORS以及后端使用Nginx和Java配置CORS的示例，强调了Access-Control-Allow-*相关头部设置的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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