Angular调用接口报CORS 'Access-Control-Allow-Origin'缺失问题求助

你当前的跨域错误来自两类请求：一类是调用公开OMDB接口，一类是调用你本地部署的localhost:2222后端接口，可根据场景选择以下方案解决：

方案1：开发环境用Angular内置代理（本地调试推荐） #

无需修改后端代码，仅调整前端配置即可解决开发阶段的跨域问题：

• 第一步：在Angular项目根目录（和angular.json同级）新建proxy.conf.json文件，内容如下：

{
  "/api": {
    "target": "http://localhost:2222",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  },
  "/omdb": {
    "target": "https://www.omdbapi.com",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/omdb": ""
    }
  }
}

• 第二步：修改angular.json配置，找到projects -> 你的项目名 -> architect -> serve -> options节点，新增代理配置：

"proxyConfig": "proxy.conf.json"

• 第三步：修改MoviesService中的请求地址，去掉完整域名，替换为代理路径：

@Injectable({
  providedIn: 'root'
})
export class MoviesService {
  searchMovie(title: String)
  {
    // OMDB请求替换为代理路径
    const url = '/omdb/?t='+title+'&apikey=你的实际apikey';
    return this.httpClient.get(url);
  }

  saveMovie(movie:Movie)
  {
    // 本地后端请求统一把http://localhost:2222替换为/api
    return this.httpClient.post<Movie>('/api/movie',movie);
  }
  // 其他所有localhost:2222的请求都按照上述规则替换即可
  constructor(private httpClient: HttpClient) {}
}

• 第四步：重启ng serve，代理即可生效，开发阶段不会再报跨域错误。

方案2：后端配置CORS响应头（生产环境推荐） #

这是最根本的解决方案，直接让后端返回允许跨域的响应头，开发生产都适用：

• 若你自己的后端是Spring Boot：可以在Controller类或者接口方法上加@CrossOrigin(origins = "*")注解，也可以新增全局CORS配置类限制允许的前端域名。
• 若你自己的后端是Node.js Express：先安装cors依赖npm install cors，再在入口文件中引入使用：

const cors = require('cors');
app.use(cors()); // 生产环境可以指定origin参数限制可访问的域名

OMDB官方接口本身已经支持跨域请求，如果调用该接口仍报CORS错误，请检查你的apikey是否有效、请求参数是否正确。

方案3：生产环境用反向代理 #

如果不方便修改后端配置，生产部署时可以用Nginx、Caddy等反向代理工具，把前端静态资源和后端接口挂载到同一个域名下，天然规避跨域问题。Nginx配置示例：

location /api/ {
    proxy_pass http://localhost:2222/;
}

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