html ajax访问webapi 跨域

一、为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testWebApi.aspx.cs" Inherits="ZGFK.testWebApi" %>
<% Response.AddHeader("Access-Control-Allow-Origin", "*");%>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>

    <title></title>
    <script src="scripts/jquery-1.10.2.js"></script>
    <script>
        var app_token;
        var access_token;
        $(function () {
            var data = { "appId": "demo1", "appSecuret": "123456" };
            $.ajax({
                url: "http://localhost:8080/ierp/api/getAppToken.do",
                data: JSON.stringify(data),
                type: "post",
                dataType: "json",
                withCredentials: true,
                contentType: false,//"application/json",
                success: function (data) {
                   
                    var result = eval(data.data)
                    console.log(JSON.stringify(result.app_token));
                    app_token = (result.app_token);
54 
                }, error: function (e) {
                    alert("获取app_token错误" + JSON.stringify(e));
                }
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

html ajax访问webapi 跨域

相关推荐