科尔多瓦没有访问控制允许来源

Posted

技术标签:

【中文标题】科尔多瓦没有访问控制允许来源【英文标题】:cordova No Access-Control-Allow-Origin 【发布时间】:2019-06-18 10:57:10 【问题描述】:

我有一个 webapi 项目(.net mvc webapi),它返回一些包装在 json/xml 中的数据,所以我的 Cordova 项目向某个 api 地址发送请求以获取数据,但我得到一个访问错误

访问 XMLHttpRequest 在 'https://06ae934f.ngrok.io/api/Catalog/get_catalogs' 来自原点 “null”已被 CORS 策略阻止:否 请求中存在“Access-Control-Allow-Origin”标头 资源。

js代码

const Http = new XMLHttpRequest();
const url='https://06ae934f.ngrok.io/api/Catalog/get_catalogs';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => 
  alert(Http.responseText)

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="org.test.test" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Catalog</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-navigation href="*"/>
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <access origin="https://06ae934f.ngrok.io"/>
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

【问题讨论】:

这可能是一个类似的问题。 ***.com/questions/49937905/… 【参考方案1】:

你应该在你的 webApi 项目的 web.config 中添加这个:

<system.webServer>
   <httpProtocol>
      <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="Access-Control-Allow-Headers" value="Content-Type" />
          <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
   </httpProtocol>
</system.webServer>

【讨论】:

以上是关于科尔多瓦没有访问控制允许来源的主要内容,如果未能解决你的问题,请参考以下文章

访问被 CORS 策略阻止:没有“访问控制允许来源”

没有“访问控制允许来源”-CORS

react-admin 没有'访问控制允许来源'

没有“访问控制允许来源”Angular 4 应用程序

jQuery - 没有访问控制允许来源

ionic 2 没有“访问控制允许来源”标头