您正在处理 CORS(跨源资源共享)默认情况下,在所有浏览器中都尊重这一点,并且所有 Web 服务器默认设置为不允许 CORS 请求。更多关于 CORS的信息在这里
如果您是 Web 开发人员,并且拥有 Web 服务器,但您需要从 javascript 访问一些外部公司 API,最简单的方法是将您的服务器设置为 Web 代理。以下是一些服务器的步骤
(Guru 读者,由于我将其声明为 wiki,因此请随时在此处添加更多服务器配置)
使用 mod_proxy 和 mod_proxy_http 的应用程序
打开您的虚拟主机文件并添加这些行(启用 mod proxy foirst -在此处进一步阅读)
ProxyPass /proxy http://domainname.com/
ProxyPassReverse /proxy http://domainname.com/
Nginx
如果您将 NGIX 用于您的应用程序配置,请添加以下行
location /proxy {
proxy_pass http://domainname.com/;
proxy_set_header X-Real-IP $remote_addr; <-- maybe good to set
}
在此链接上进一步阅读。
IIS
如果您使用的是 IIS 服务器
配置比上面的配置要复杂一些,但是您可以在此处找到所有相关信息
对于上述所有示例,现在您可以在响应中使用 Ajax 和 JSON,而不是使用有限的 JSONP 功能,因为您在服务器上提供该 API。
是的,您也可以毫不费力地将它与 Phonegap 一起使用
我可以说一件事。您将服用蓝色药丸或红色药丸 :) 我要加入,但有两种方法。再次,拥有您自己的具有上述配置的服务器,第二个是使用Phonegap本机插件弄脏您的手。
第一种方法(Web 服务器所有者)
要求您拥有自己的 Web 服务器。您将需要 mod_proxy 的上述配置,以便您可以隐藏服务背后的真实服务并代理来自 phonegap 应用程序的所有 HTTP 请求。您还必须在响应中包含 CORS(跨源资源共享)标头,该标头会返回给 phonegap 应用程序。还要考虑通过身份验证来保护这一点,因为您正在向世界公开内容。您的 phonegap 应用程序至少通过基于 HTTPS 的基本 HTTP 身份验证对您的 Web 服务进行身份验证。
按照以下步骤完成设置:
阿帕奇
在 apache 服务器上,首先启用模块“headers”
$ a2enmod headers
在代理配置之前或之后的虚拟主机文件中添加以下内容:
ProxyPass /proxy http://domainname.com/
ProxyPassReverse /proxy http://domainname.com/
# CORS allow to all
Header set Access-Control-Allow-Origin *
# Set basic authentication
<Location /proxy>
AuthType Basic
AuthName "Restricted Area"
AuthBasicProvider file
AuthUserFile /usr/local/apache/passwd/passwords
Require valid-user # setup user/password in file above using htpasswd
</Location>
在 phonegap (Sencha Touch) 中,对于 ajax 请求设置用户名和密码,如 buffer.SlowBuffer();
您需要第一种方法来打包 auth 标头
function make_base_auth(user, password) {
var tok = user + ':' + pass;
var hash = Base64.encode(tok);
return "Basic " + hash;
}
然后在你的代理集标题中像这样
headers : { Authorization : make_base_auth("some_username", "some_password") } // I know this is readable by other by you get the point.
IIS 6
要启用 CORS 的 Microsoft IIS6,请执行以下步骤:
- 打开 Internet 信息服务 (IIS) 管理器
- 右键单击要为其启用 CORS 的站点,然后转到“属性”
- 更改为 HTTP 标头选项卡
- 在自定义 HTTP 标头部分中,单击添加
- 输入 Access-Control-Allow-Origin 作为标题名称
- 输入 * 作为标题值
- 单击确定两次
可选,设置基本身份验证,这是直接的过程。
IIS 7
还要考虑检查上面提到的关于如何设置代理的文档,然后修改该 web.config 文件并添加以下内容
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
nginx
在位置附加以下
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 200;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
Google App 引擎也很有帮助
由于这个盒子太长了,我将只提供一个博客的链接,其中所有内容都得到了正确的解释
链接
...那么第二种方法呢
好吧,它至少涉及一些本机编码,您将需要 phonegap 插件 phonegap-proxy ,您可以在此处找到但我会避免“本机”,因为 phonegap 的重点是使用单个代码拥有多平台应用程序......哦,如果你想要在这里编写本机代码的“特殊”插件是一个很好的例子,如何为 facebook API 做同样的事情
现在由您决定采用哪种方法;)