一、什么是跨域？
定义：是指浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对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