如何解决Angular应用在Safari中的Access-Control-Allow-Origin跨域错误？

嘿，我完全懂你现在的头疼——Safari在处理跨域请求的时候确实比Chrome和Firefox严格不少，尤其是本地开发场景下。既然你已经试过了禁用本地文件限制但没效果，我给你几个实用的解决方案，从根本解决到临时调试都覆盖到了：

1. 后端配置CORS（最推荐的生产级方案） #

其实CORS问题的根源是后端服务器没有允许你的前端域名（http://localhost:8000）发起跨域请求，这才是最根本的解决办法，不管用什么浏览器都能搞定。举几个常见后端的配置例子：

• Node.js/Express：用cors npm包快速配置

  const cors = require('cors');
  const express = require('express');
  const app = express();
  
  // 允许localhost:8000的请求
  app.use(cors({ origin: 'http://localhost:8000' }));
  
  // 或者允许所有域名（生产环境不建议这么做）
  // app.use(cors());
  

• Java Spring Boot：在控制器类上添加@CrossOrigin注解

  @RestController
  @CrossOrigin(origins = "http://localhost:8000")
  public class YourApiController {
      // 接口逻辑
  }
  

只要后端配置好了，不管是Safari还是其他浏览器，都不会再出现CORS错误了。

2. 使用Angular CLI的代理配置（本地开发最优解） #

如果你暂时没法修改后端，Angular CLI自带的代理功能可以帮你绕过浏览器的CORS检查，这个方法对所有浏览器都有效，包括Safari，而且不用依赖任何扩展。步骤很简单：

1. 在Angular项目的根目录创建一个名为proxy.conf.json的文件，内容如下（把https://your-api-domain.com换成你的实际API地址）：

   {
     "/api/*": {
       "target": "https://your-api-domain.com",
       "secure": false,
       "changeOrigin": true,
       "logLevel": "debug"
     }
   }
   

   这里的/api/*是指所有以/api开头的请求都会被代理到目标地址。

2. 打开angular.json文件，找到projects -> 你的项目名 -> architect -> serve -> options，添加"proxyConfig": "proxy.conf.json"：

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "your-project-name:build",
       "proxyConfig": "proxy.conf.json"
     },
     // 其他配置...
   }
   

3. 重启你的Angular开发服务器（ng serve），之后所有前端发起的API请求都会通过代理转发，浏览器就不会触发CORS错误了。

3. Safari专属的全局调试开关（临时应急用） #

如果上面两种方法都暂时没法用，你可以通过终端命令关闭Safari的CORS限制，不过这是全局设置，调试完记得改回来，避免安全风险：

1. 先关闭所有Safari窗口，打开终端。

2. 输入以下两条命令：

   defaults write com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2DeveloperExtrasEnabled -bool true
   defaults write com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2AllowUniversalAccessFromFileURLs -bool true
   

3. 重新打开Safari，现在应该可以正常发起跨域请求了。

4. 调试完成后，记得恢复设置，输入：

   defaults delete com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2DeveloperExtrasEnabled
   defaults delete com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2AllowUniversalAccessFromFileURLs
   

内容的提问来源于stack exchange，提问作者Mitch