欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

asp.net—WebApi跨域

程序员文章站 2022-07-02 17:29:03
一、什么是跨域? 定义:是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 同源策略限制了以下行为: 1、Cookie、LocalStorage和IndexDB无法读取 2、DOM和js对象无法获取 3、ajax请求无法发送 二、为什么要跨 ......

一、什么是跨域?

  定义:是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对javascript实施的安全限制。

  同源策略限制了以下行为:

  1、cookie、localstorage和indexdb无法读取

  2、dom和js对象无法获取

  3、ajax请求无法发送

二、为什么要跨域?  

  跨域问题来源于javascript的同源策略,即只有 协议+主机名+端口号(如存在)相同,则允许相互访问。

  那么跨域就是在 协议+主机名+端口号(如存在)不相同时,让其允许相互访问。

三、webapi跨域解决办法

  跨域解决办法有多种, 这里我给出最近在webapi + vue 实现前后端分离项目开发中的跨域解决方案:

  (1)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, options" />
        </customheaders>
     </httpprotocol>
 </system.webserver>

  (2)当遇到webapi要开启session会话时,那么前端和后端的配置信息如下

webapi端(webapi默认是不支持session会话,需先手动设置其支持session会话)

 <system.webserver>
     <httpprotocol>
        <customheaders>
            <add name="access-control-allow-origin" value="http://localhost:8080" />  //此时这里就不能为 * ,要填前端项目的正确域名地址
            <add name="access-control-allow-headers" value="*" />
            <add name="access-control-allow-methods" value="get, post, put, delete, options" />
            <add name="access-control-allow-credentials" value="true"/>
        </customheaders>
     </httpprotocol>
 </system.webserver>

vue端

● 每个ajax请求都需将 withcredentials = true