WebApi跨域问题

如果急着解决跨域问题则需要配置该配置到应用程序的Web.config文件中。如果想了解一下WebApi跨域问题则继续往下看

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
      </customHeaders>
    </httpProtocol>
  ...
  </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”，它对获取资源的操作将会被浏览器拒绝