出现错误请求的资源上不存在“Access-Control-Allow-Origin"标头."在离子2 [英] Getting Error " No 'Access-Control-Allow-Origin' header is present on the requested resource." in ionic2

问题描述

我正在尝试使用在 localhost:8100 上运行的 Ionic2 应用程序中的 localhost:58682/home/index1 上运行的 WebApi 获取数据.
我收到以下错误消息.

I am trying to fetch data using WebApi which runs on localhost:58682/home/index1 in Ionic2 app which runs on localhost:8100.
I am getting the following error message.

XMLHttpRequest cannot load http://localhost:58682/home/index1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

我的 service.ts 文件

 @Injectable()
export class ResponseService{
 
 private responseUrl='http://localhost:58682/home/index1';
   getresponseDetails()
    {
        return this.http.get(this.responseUrl).map(res=>res.json());
    }
    }

ionic.config.json

{
  "name": "App",
  "app_id": "90594fdf",
  "type": "ionic-angular",
  "proxies":[
    {
      "path":"/home",
      "proxyUrl":"http://localhost:58682/home"
    }
  ]
}

我浏览了一些 CORS 博客，但无法修复它.究竟出了什么问题?

I went through some CORS blogs but couldn't fix it. What exactly is going wrong?

推荐答案

使用 此插件 在您的浏览器中.

Try again using this plugin in your browser.

它允许您从任何来源请求任何带有 ajax 的网站，无论 http/https 差异等.实际上在响应中添加了 Allow-Control-Allow-Origin: * 标头.

It allows to you request any site with ajax from any source, no matter http/https discrepancies and the like. Practically adds the Allow-Control-Allow-Origin: * header in the response.

请记住，这是一种创可贴的解决方案.您的服务器响应实际上必须具有 'Access-Control-Allow-Origin': '*' 标头，最好具有比 * 更具体的值.

Please keep in mind that this is a band-aid solution. Your server response has to actually have the 'Access-Control-Allow-Origin': '*' header, preferably with a more specific value than *.

这篇关于出现错误请求的资源上不存在“Access-Control-Allow-Origin"标头."在离子2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！