共计 1634 个字符，预计需要花费 5 分钟才能阅读完成。
本文主要是关于跨域的几种方式，关于什么是跨域这里就不多说了，写这个也是为了记住一些知识点的。
一. jsonp
jsonp 的跨域方式很容易理解，页面的的每一个 script 标签浏览器都会发送 get 请求获取对应的文本资源，获取到了之后，会将获取回来的脚本直接执行，jsonp 就是利用这个原理，在服务器写一个接口，接收请求的参数和结果回调的函数，在请求接口前应该要事先定义好要回调的函数，通过 script 标签请求之后得到的 script 会直接执行，大概的流程如下：
// 浏览器端，已经定义好了函数 A
function A(str) {
console.log(str);
}
// 服务器端
function getData(method) {
return method + ‘(“Hello Jsonp”)’;
}
浏览器端会动态添加某个 script 标签
<script src=”……/getData?method=A”></script>
请求这个 script 标签返回的就是 A(“Hello Jsonp”)
会立即执行这个函数，A(“Hello Jsonp”) 里面的 ”Hello Jsonp” 就是实际要取的数据
二.Cors
这种跨域方式需要后端的支持，需要在后端返回接口之前设置返回的头部 Access-Control-Allow-Origin 具体的实现方法要根据你用的后端的方法来设置，我用的是 asp.net mvc，实现的方法有很多，其中实现的一个方法如下：
1、创建一个 attribute
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
filterContext.RequestContext.HttpContext.Response.AddHeader(“Access-Control-Allow-Origin”, “*”);
base.OnActionExecuting(filterContext);
}
}
2、应用到 Controller 中的 Action
[AllowCrossSiteJson]
public ActionResult YourMethod()
{
return Json(“data”);
}
三. 配置服务器反向代理
此种跨域方式需要服务器，如 nginx 和 IIS 的支持，nginx 的反向代理我不是很了解，网上看的别人的配置是这样的，有需要的可以了解一下：
// proxy 服务器
server {
listen 80;
server_name www.domain1.com;
location / {
proxy_pass http://www.domain2.com:8080; #反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改 cookie 里域名
index index.html index.htm;
# 当用 webpack-dev-server 等中间件代理接口访问 nignx 时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带 cookie 时，可为 *
add_header Access-Control-Allow-Credentials true;
}
}
IIS 的话，可以参考一下这个 iis7.5 做反向代理配置方法实例图文教程
四. 使用 websocket
websocket 和 http 都是基于 tcp 的应用层协议，websocket 协议和 tttp 协议的主要区别是 websocket 支持跨域，建立的是长连接，连接是双向的。我自己用 c# 和 nodejs 的 socket.io 写过一些 demo，但是没有在实际工作中用过，所以对这一块了解不深。
