UDN-企业互联网技术人气社区

板块导航

浏览  : 710
回复  : 4

[原生js] WebApi跨域问题

[复制链接]
htmlman的头像 楼主
发表于 2017-1-10 15:44:52 | 显示全部楼层 |阅读模式
  如果急着解决跨域问题则需要配置该配置到应用程序的Web.config文件中。如果想了解一下WebAPI跨域问题则继续往下
  1. <system.webServer>
  2.     <httpProtocol>
  3.       <customHeaders>
  4.         <add name="Access-Control-Allow-Origin" value="*" />
  5.         <add name="Access-Control-Allow-Headers" value="*" />
  6.         <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
  7.       </customHeaders>
  8.     </httpProtocol>
  9.   ...
  10.   </system.webServer>
复制代码

  1,为什么会存在跨域问题?

  浏览器会对JavaScript的执行进行相应的限制,导致跨域问题

  2,同源策略

  “源”是指站点或者域。必须要求相应的URI在如下三个方面均是相同的:

  ①主机名称(域/子域名或者IP地址)

  ②端口号

  ③网络协议(http或者https)

  例如:https://192.168.1.1:8080(源)

  在同源的情况下不会出现跨域问题

  3,什么是CORS(跨域资源共享)规范?

  CORS是各个浏览器厂家共同遵守的标准

  ①对消费者授权

  如果浏览器对CORS支持,由它发起的请求会携带一个“Origin”的报头表明请求页面所在的站点(例如:Origin:https://192.168.1.1:8080)

  对消费者授权通过“Access-Control-Allow-Origin”响应报头来设置(设置“*”对所有消费者授权)

  ②对响应报头的授权

  设置一组直接暴露给客户端JavaScript程序的响应报头,但是对简单响应报头设置是无效的

  CORS简单响应报头包括:Cache-Control、Content-Language、Content-Type、Expries、Last-Modified、Pragma

  "Access-Control-Expose-Headers"对响应报头的授权(设置“*”对所有响应报头授权)

  ③预检请求

  所谓预检机制就是在浏览器发送真正的跨域资源请求前,先发送一个预检请求(可以使用“Access-Control-Max-Age”设置缓存时间)

  CORS规范将跨域资源请求划分为两种类,即“简单请求”和“非简单请求”

  1>简单Http方法:GET、HEAD、POST

  2>简单请求报头:Accept、Accept-Language、Content-Language、Content-Type(application/x-www-form-urlencoded、multipart/form-data、text/plain)

  3>自定义请求报头:浏览器自动生成的报头、由JavaScript自行添加的报头

  “简单请求”包括:①请求采用简单HTTP方法②请求不具有自定请求报头或者是简单请求报头

  “Access-Control-Allow-Methods”:跨域资源请求允许采用的HTTP方法列表

  “Access-Control-Allow-Headers”:跨域资源请求允许携带的自定义报头列表

  “Access-Control-Max-Age”:将响应结果进行缓存(单位秒),这样可以让浏览器避免频繁的发送预检请求

  ④是否支持用户凭证

  如果客户端JavaScript程序利用一个withCredentials属性为true的XMLHttpRequest发送了一个跨域请求,但是浏览器得到的响应中不具有一个值为“ture”的响应报头“Access-Control-Allow-Credentials”,它对获取资源的操作将会被浏览器拒绝


相关帖子

发表于 2017-1-10 15:45:22 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2017-1-10 15:45:22 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部