html ajax访问webapi 跨域
Posted 江小白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>
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服务的解决方案
关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案