Access-Control-Allow-Origin: Dealing with CORS Errors in Angular

最新推荐文章于 2025-06-06 09:52:38 发布

转载最新推荐文章于 2025-06-06 09:52:38 发布 · 355 阅读

文章标签：

本文探讨了Angular应用中遇到的'Access-Control-Allow-Origin'错误，详细分析了可能的原因，包括跨域请求、本地文件访问和不同协议请求等。文章提供了几种解决方案，如配置CORS头、使用代理服务器和JSONP请求，同时也讨论了禁用同源策略的风险。

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

https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

Getting this error in your Angular app?

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

You’ve run afoul of the Same Origin Policy – it says that every AJAX request must match the exact host, protocol, and port of your site. Things that might cause this:

Hitting a server from a locally-served file (a request from file:///YourApp/index.html to http://api.awesome.com)
Hitting an external API (a request from http://yourapp.com to http://api.awesome.com).
Hitting an internal API (a request from http://yourapp.com to http://api.yourapp.com).
Hitting a different port on the same host (webapp is on http://localhost:3000, API is http://localhost:4000)
Requesting over http from https or vice-versa (requesting https://yourapp.com from http://yourapp.com)

To be clear, this is not an Angular error. It afflicts all web apps equally, and most of the fixes we’ll look at below are actually modifying the server or the browser.

How to fix it

Here are a few ways to solve this problem:

Best: CORS header (requires server changes)

CORS (Cross-Origin Resource Sharing) is a way for the server to say “I will accept your request, even though you came from a different origin.” This requires cooperation from the server – so if you can’t modify the server (e.g. if you’re using an external API), this approach won’t work.

Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *). This should solve your problem.

2nd choice: Proxy Server

If you can’t modify the server, you can run your own proxy. And this proxy can return the Access-Control-Allow-Origin header if it’s not at the Same Origin as your page.

Instead of sending API requests to some remote server, you’ll make requests to your proxy, which will forward them to the remote server. Here are a few proxy options.

3rd choice: JSONP (requires server support)

If CORS and the proxy server don’t work for you, JSONP may help. You essentially make a GET request with a callback parameter:

(get) http://api.example.com/endpoint?callback=foo

The server will wrap the JSON reply in a function call to your callback, where you can handle it:

foo({"your": "json", here: true})

There are some downsides, notably that JSONP only supports GET requests and that you still need a cooperative server.

Dev-Only: Disable Same Origin

If this is only for development or learning purposes, the easiest thing to do is to disable the Same Origin Policy in your browser. Be aware that if you do this, you’re opening your browser up to security risks. Follow these instructions:

This is more of a last resort. Modifying the server to support CORS or running a proxy are the best approaches.