一、为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
二、什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
当前页面 http://localhost:60503/testWebApi.aspx
访问页面 http://localhost:8080/ierp/api/getAppToken.do
端口不一致 出现跨域
三、跨域解决方法
1、jsonp
$.ajax({ url: "http://localhost:8080/ierp/api/getAppToken.do", data: JSON.stringify(data), type: "get", dataType: 'jsonp', crossDomain: true, contentType: false,//"application/json", success: function (data) { alert(data) } })
jsonp只能是get访问
2、CORS
在web.config中添加
<system.webServer>
<httpProtocol>
<!--跨域配置开始-->
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<!--支持全域名访问，不安全，部署后需要固定限制为客户端网址-->
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
<!--支持的http 动作-->
<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />
<!--响应头 请按照自己需求添加 这里新加了token这个headers-->
<add name="Access-Control-Request-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
<!--允许请求的http 动作-->
</customHeaders>
<!--跨域配置结束-->
</httpProtocol>
</system.webServer>
html
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testWebApi.aspx.cs" Inherits="ZGFK.testWebApi" %> 2 <% Response.AddHeader("Access-Control-Allow-Origin", "*");%> 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Access-Control-Allow-Origin" content="*"/> 8 9 <title></title> 10 <script src="scripts/jquery-1.10.2.js"></script> 11 <script> 12 var app_token; 13 var access_token; 14 $(function () { 15 var data = { "appId": "demo1", "appSecuret": "123456" }; 16 $.ajax({ 17 url: "http://localhost:8080/ierp/api/getAppToken.do", 18 data: JSON.stringify(data), 19 type: "post", 20 dataType: "json", 23 withCredentials: true, 24 contentType: false,//"application/json", 25 success: function (data) { 26 27 var result = eval(data.data) 28 console.log(JSON.stringify(result.app_token)); 29 app_token = (result.app_token); 30 54 55 }, error: function (e) { 56 alert("获取app_token错误" + JSON.stringify(e)); 57 } 58 }) 59 }) 60 </script> 61 </head> 62 <body> 63 <form id="form1" runat="server"> 64 <div> 65 66 </div> 67 </form> 68 </body> 69 </html>