一：前言

由于最近打算在新项目中采用前后端分离的方案，技术选型为ElementUI+Web API，由于浏览器的同源策略，因此必然会涉及到跨域问题（什么是同源策略、跨域问题，自行百度）。跨域的解决办法比较多样，这里重点阐述一下WEB API中使用CORS实现跨域。更详细的内容请搜索阮一峰《跨域资源共享CORS详解》

典型错误提示为：

跨域请求典型错误提示

二：CORS简介

CORS全称Cross Origin Resource Sharing，中文解释为跨域资源共享，即允许服务器放宽了同源策略。 使用 CORS，服务器可以显式允许某些跨源请求同时拒绝其它请求。 CORS 是比JSONP更安全、 更灵活的技术方案。

跨域请求分为两类，简单请求和复杂请求，根据请求类型的不同，浏览器处理的方式不同。

对于简单请求，跟非跨域请求差不多，浏览器直接发送实际请求。

简单请求示例

满足以下条件的请求称为简单请求

请求方法是 GET、 HEAD 或 POST应用程序除了设置Accept, Accept-Language, Content-Language, Content-Type, or Last-Event-ID请求头外无任何其他请求头内容类型标头 (如果设置) 是以下之一：application/x-www-form-urlencoded、multipart/form、text/plain

对于复杂请求，浏览器首先会发送一个类型为OPTIONS的预检请求，预检通过后才发送实际的请求。

预检常见错误

复杂请求示例

三:WEB API启用跨域

方法一：在webconfig增加以下节点，此方法在任意ASP.NET开发模式中均可用

通过webconfig配置允许跨域

方法二：使用微软提供的CORS扩展包，可作用于全局、控制器、ACTION，控制更加灵活

打开包管理器控制台输入 Install-Package Microsoft.AspNet.WebApi.Cors

全局启用

全局启用

作用于控制器

作用于控制器

作用于ACTION

作用于ACTION

四：踩坑点说明

1.关于Access-Control-Allow-Headers、Access-Control-Allow-Methods的设置切记不要使用*,在微软提供的CORS开发包中均允许设置这两项为*是因为代码中进行了处理，实际也是将客户端的自定义头、和请求方法设置为逗号形式而已。小编就是因为看了示例，误以为在配置文件也可以使用*设置此两项，耽误了很多时间，在查阅源码后才发现是通过代码做了处理

2.在设置没有问题的前提下，若出现预检失败，可尝试注释配置文件中下面两项（非必须）

3.对于其他开发语言也可以参照在Response中设置Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods响应头实现跨越

4.为保证网站安全，Access-Control-Allow-Origin尽量不要为了方便设置为*

5.IE8、IE9部分浏览器不支持跨域请求的解决办法，在ajax的调用处增加

jQuery.support.cors = true;

以上便是与大家分享的内容，若有任何问题请私聊，请大家多多指点！