码迷,mamicode.com
首页 > Windows程序 > 详细

html ajax访问webapi 跨域

时间:2020-05-09 17:05:08      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:响应头   meta   ESS   requested   config   body   protocol   appid   server   

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

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

标签:响应头   meta   ESS   requested   config   body   protocol   appid   server   

原文地址:https://www.cnblogs.com/Julyra/p/12858478.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!