本地web访问远程服务器后端引发的跨域问题

首先，说明一下案例性质，web调用restApi。

其次，说明一下案例的基本情况。我在本地编写的web程序，后端程序保存在远程服务器端，如166.66.66.6:8000/setup。

本次介绍的跨域的解决办法，不涉及jsonp方式。而是需要将后端的代码中设置Access-Control-Alow-Origin = “*”，表示允许一切跨域访问。Access-Control-Alow-Origin一次只能设置一个域名，但是如果想要同时设置多个域名的话，解决办法是，建立一个允许跨域请求的域名列表，然后获取请求来源域名，和列表进行对比，如果来源域名存在允许的跨域请求域名列表里面，再添加Access-Control-Alow-Origin响应头。

第 一次出现问题的情况： $.ajax中设置url：“……”，data：{ “name”， “xiaobai”；“age”，“22” }，type：“post”，则会发生报错400，response提示{"ret":-1,"info":"Failed to parse JSON invalid character 'a' looking for beginning of value"}，意思是传送的数据没能成功转为JSON字符串。这时，将设置改为data：JSON.stringify{ “name”， “xiaobai”；“age”，“22” }，dataType：“json”则成功。。这里dataType是对返回的数据进行格式的转换。原理解释一下，

注意，这里出现的问题，如果web代码和后端代码在同一个域时，则会自动转为JSON格式。而不需要JSON.stringify转化。还有一点，若web代码在本地，后端代码在服务器端，可以通过nginx代理，使其避开跨域问题的发生。

第二次出现问题的情况：如果只是简单的post发送方式，将json格式的数据发送到后端，则按照上述第一次出现的情况，即可解决问题。当需要在ajax中加入

beforeSend:function(xhr){
    xhr.setRequestHeader("Authorization", userToken);
//xhr.setRequestHeader("Content-Type", "application/json");
},

时，又会出现报错提示：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

这 个时候，问题出现在content-type出现了问题。因为我们准备的数据时string格式的，同时ajax默认提交时告诉服务器数据格式是 "'application/x-www-form-urlencoded"，当我们用JSON.stringify转化数据后