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> 相关推荐
kentrl 2020-11-10
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
时光如瑾雨微凉 2020-07-19
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05