Angular $http 到 Web Api 给出 XMLHttpRequest 错误 - 请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-03

【中文标题】Angular $http 到 Web Api 给出 XMLHttpRequest 错误 - 请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：Angular $http to Web Api gives error of XMLHttpRequest -No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2016-12-26 04:47:18

【问题描述】：

我已经阅读了许多关于 Angular $http 数据服务调用另一个应用程序 Web Api 的问题和答案。是的，我看到有人说允许“邮递员”进入的原因是因为它像第三方外部应用程序等。

过去我确实可以控制安装 CORS 等的 Web Api。

但是，我认为某些事情必须是可能的，因为几个 *** 问题和答案确实有给我希望的答案

这是错误

XMLHttpRequest cannot load http://localhost:60127/api/Product/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:60128' is therefore not allowed access.

带有 Web Api 代码的项目

 public class ProductController : ApiController
 
    // GET api/<controller>
    public IHttpActionResult Get() 
    IHttpActionResult ret = null;
    // ....
 

Web api 的 URL（与 Postman 一起使用） http://localhost:60127/api/Product/

角度代码

function productList() 
            //http://localhost:60127/api/Product/
            //dataService.get("/api/Product")
            dataService.get("http://localhost:60127/api/Product/")
                .then(function (result) 
                    vm.products = result.data;    // result is an http status
                    debugger;   // stop to see the code 
                ,
                function (error) 
                    handleException(Error);

                );

        

【问题讨论】：

我不想重复，但你的答案就在这里。 ***.com/a/27504439

【参考方案1】：

在 WebAPiConfig 类中，您需要在注册 WebAPiConfig 时启用 Cors

public static class WebApiConfig

    public static void Register(HttpConfiguration config)
    
        config.MapHttpAttributeRoutes();
        config.EnableCors(new System.Web.Http.Cors.EnableCorsAttribute("*", "*", "*"));

    

【参考方案2】：

您是否启用了 CORS？并添加如下内容：

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class ProductController : ApiController

   .....

【参考方案3】：

如果服务器和客户端的来源不同，则需要在服务器端将 Access-Control-Allow-Origin 标头设置为 true，

response.getHttpHeaders().add("Access-Control-Allow-Origin", "*"); // 将允许所有 API 的请求

所以如果你使用过滤器，你可以这样做

 public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException 
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);

【讨论】：

如果邮递员可以调用它，似乎必须有一种方法可以发送标题以强制它工作......对吗？

实际上根据跨域策略，我们需要在服务器端定义标头以允许其他域使用服务，这只有在服务器和客户端具有不同的端口或 IP 时才需要