使用 PhoneGap 和 jQuery 的跨域请求不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10173427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross-domain requests using PhoneGap and jQuery doesn't work
提问by weerd2
I'm creating a PhoneGap app for Android. To get data from the (remote) server I make a REST call using jQuery's $.ajax() function. There are a few things you must know:
我正在为 Android 创建一个 PhoneGap 应用程序。为了从（远程）服务器获取数据，我使用 jQuery 的 $.ajax() 函数进行了 REST 调用。有几件事你必须知道：
- Type of the call must be POST
- The server expects JSON data(at least username and password)
- The server sends back JSON data
- 调用类型必须是 POST
- 服务器需要 JSON 数据（至少是用户名和密码）
- 服务器发回 JSON 数据
The code:
编码：
function makeCall(){
var url = "http://remote/server/rest/call";
var jsonData ='{"username":"'+$('#username').val()+'","password":"'+$('#password').val()+'"}';
$.ajax({
headers: {"Content-Type":"application/json; charset=UTF-8"},
type: "POST",
url: url,
data: jsonData,
dataType: "json",
success: succesFunction,
error: errorFunction
});
}
But, this doesn't work. When I use Firebug to see the servers response, there is nothing. With TcpTrace I can see the headers of the request. Instead of an expected POST method, there is an OPTIONS method, with some strange headers added.
但是，这行不通。当我使用 Firebug 查看服务器响应时，什么也没有。使用 TcpTrace，我可以看到请求的标头。不是预期的 POST 方法，而是一个 OPTIONS 方法，添加了一些奇怪的标题。
OPTIONS /remote/server/rest/call HTTP/1.1
Host: localhost:8081
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: nl,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Origin: null
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Pragma: no-cache
Cache-Control: no-cache
I know it has something to do with doing cross-domain requests, but I don't know how to solve the problem. I tried a few things to fix it, but with no result:
我知道这与做跨域请求有关，但我不知道如何解决问题。我尝试了一些方法来修复它，但没有结果：
- Use 'jsonp' in stead of 'json'
- Try to use Cross-Origin Resource Sharing (CORS)
- 使用“jsonp”代替“json”
- 尝试使用跨域资源共享 (CORS)
The problem has also something to do with same origin policy, but this does not apply to the file:// protocol PhoneGap is using to load a local html file.
该问题也与同源策略有关，但这不适用于 PhoneGap 用于加载本地 html 文件的 file:// 协议。
In my AndroidManifest.xml file, the option
在我的 AndroidManifest.xml 文件中，选项
<uses-permission android:name="android.permission.INTERNET" />
is set.
设置。
I'm trying to fix this for 2 days now, but no result till now. Is this even possible to do? Do you have any tips for me so I can move on?
我现在试图解决这个问题 2 天，但直到现在还没有结果。这甚至可以做到吗？你有什么建议可以让我继续前进吗？
Thanks in advance!
提前致谢！
采纳答案by weerd2
I solved the problem by myself. The problem is located in the url, where I have to add a domain. I changed
我自己解决了这个问题。问题出在url中，我必须在其中添加域。我变了
var url = "http://remote/server/rest/call";
var url = "http://remote/server/rest/call";
to
到
var url = "http://remote.mydomain.com/server/rest/call";
var url = "http://remote.mydomain.com/server/rest/call";
and it works!
它有效！
I assumed the first url should work because it works on an iphone app with exact the same url and settings. It has also something to do with a double firewall(Windows and ESET firewall) where I shut down the Windows firewall.
我认为第一个 url 应该可以工作，因为它适用于具有完全相同的 url 和设置的 iphone 应用程序。它也与我关闭 Windows 防火墙的双防火墙（Windows 和 ESET 防火墙）有关。
Anyway, thanks for your answers!
无论如何，感谢您的回答！
回答by Drew Dahlman
you need to whitelist your external domains. just go to your phonegap / cordova plist file in xcode and add a new entry, have it's value be * and you can access any website out there.
您需要将外部域列入白名单。只需在 xcode 中转到您的 phonegap/cordova plist 文件并添加一个新条目，将其值设为 *，您就可以访问那里的任何网站。
also know that this WILL NOT WORK IN A BROWSER. Browsers have crossdomain issues, not phonegap or mobile devices.
也知道这在浏览器中不起作用。浏览器有跨域问题，而不是 phonegap 或移动设备。
回答by Gokigooooks
Adding this to the config.xml saved me
将此添加到 config.xml 拯救了我
<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
I was baffled as to why any outside resource did not load, even google maps and my remote debugging tool. This saved me!
我很困惑为什么没有加载任何外部资源，甚至谷歌地图和我的远程调试工具。这救了我！
回答by kingnight
JQuery setting ：$.support.cors = true;
JQuery 设置：$.support.cors = true;
回答by Selvaraj M A
Try setting dataType:jsonpand set crossDomain:trueFor cross domain ajax requests you can use jsonp.
http://api.jquery.com/jQuery.ajax/
尝试设置dataType:jsonp并设置crossDomain:true对于跨域ajax请求，您可以使用jsonp。
http://api.jquery.com/jQuery.ajax/
Or you can append callback=? to your url.
或者您可以附加 callback=? 到您的网址。
