浏览器控制台报错：No ‘Access-Control-Allow-Origin‘ header

最新推荐文章于 2025-04-23 11:58:16 发布

清河九月

最新推荐文章于 2025-04-23 11:58:16 发布

阅读量754

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_56088675/article/details/145992478

版权

浏览器的同源策略（Same-Origin Policy）限制，当网页从不同源（协议、域名、端口）请求资源时触发。

解决方案：
- CORS：服务器通过设置响应头（如Access-Control-Allow-Origin）允许跨域。
- JSONP：利用<script>标签绕过同源策略（仅限 GET 请求）。
- 反向代理：将跨域请求转发到同域服务器（如 Nginx 配置代理）。

Nginx 反向代理解决跨域的配置示例



location /api {
			proxy_pass http://127.0.0.1:9999/api;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection 'upgrade';
			proxy_set_header Host $host;
			proxy_cache_bypass $http_upgrade;
    
			add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

			 # 对于预检请求（OPTIONS方法），直接返回204状态码
		if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Content-Type' 'text/plain; charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
		}