html ajax访问webapi 跨域

Posted 2020-11-29 江小白ra

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

 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>

以上是关于html ajax访问webapi 跨域的主要内容，如果未能解决你的问题，请参考以下文章

AJAX跨域调用ASP.NET MVC或者WebAPI服务的解决方案

使用Cors后台设置WebAPI接口跨域访问

web api 跨域请求，ajax跨域调用webapi

关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案

ASP.NET MVC & WebApi 中实现Cors来让Ajax可以跨域访问（转载）