什么是跨域？如何解决跨域？

🎈 什么是跨域

• 域： 是指浏览器不能执行其他网站的脚本
  
• 跨域： 它是由浏览器的 同源策略 造成的,是浏览器对 JavaScript 实施的安全限制，所谓同源（即指在同一个域）就是两个页面具有相同的协议 protocol，主机 host 和端口号 port 则就会造成 跨域
  

🎈 跨域场景

• 场景的跨域场景有哪些，请参考下表
  

🎈 解决跨域的四种方式

• nginx的反向代理
  
• 使用 nginx 反向代理实现跨域，是最简单的跨域方式
  
• 只需要修改 nginx 的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能
  

// nginx配置
server {
    listen       81;
    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;
    }
}

• jsonp请求
  
• jsonp 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好 兼容低版本IE，缺点是只支持 get 请求，不支持 post 请求
  
• 原理时网页通过添加一个 </code> 元素，向服务器请求 <code>json</code> 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来<br /></li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22%2F%2Fjquery%E5%AE%9E%E7%8E%B0%5Cn%3Cscript%3E%5Cn%24.getJSON('http%3A%2F%2Fautofelix.com%2Fapi.php%26callback%3D%3F'%2C%20function(res)%20%7B%5Cn%20%20%20%20%20%2F%2F%20%E5%A4%84%E7%90%86%E8%8E%B7%E5%BE%97%E7%9A%84%E6%95%B0%E6%8D%AE%5Cn%20%20%20%20%20console.log(res)%5Cn%7D)%3B%5Cn%3C%2Fscript%3E%22%2C%22id%22%3A%22LX3T5%22%7D"></div><ul><li><strong>后端语言代理</strong><br /></li><li>可以通过一种没有跨域限制的语言中转一下，通过后端语言去请求资源，然后再返回数据<br /></li><li>比如 <code><a href="http://www.autofelix.cn" target="_blank">http://www.autofelix.cn</a></code> 需要调用 <code><a href="http://api.autofelix.cn/userinfo" target="_blank">http://api.autofelix.cn/userinfo</a></code> 去获取用户数据，因为子域名不同，会有跨域限制<br /></li><li>可以先请求 <code><a href="http://www.autofelix.cn" target="_blank">http://www.autofelix.cn</a></code> 下的 <code>php</code> 文件，比如 <code><a href="http://www.autofelix.cn/api.php" target="_blank">http://www.autofelix.cn/api.php</a></code>，然后再通过该 <code>php</code> 文件返回数据<br /></li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22php%22%2C%22code%22%3A%22%3C%3Fphp%5Cn%2F%2F%20api.php%20%E6%96%87%E4%BB%B6%E4%B8%AD%E7%9A%84%E4%BB%A3%E7%A0%81%5Cnpublic%20function%20getCurl(%24url%2C%20%24timeout%20%3D%205)%5Cn%7B%5Cn%20%20%20%20%24ch%20%3D%20curl_init()%3B%5Cn%20%20%20%20curl_setopt(%24ch%2C%20CURLOPT_URL%2C%20%24url)%3B%5Cn%20%20%20%20curl_setopt(%24ch%2C%20CURLOPT_HEADER%2C%200)%3B%5Cn%20%20%20%20curl_setopt(%24ch%2C%20CURLOPT_RETURNTRANSFER%2C%201)%3B%5Cn%20%20%20%20curl_setopt(%24ch%2C%20CURLOPT_TIMEOUT%2C%20%24timeout)%3B%5Cn%20%20%20%20curl_setopt(%24ch%2C%20CURLOPT_SSL_VERIFYPEER%2C%20FALSE)%3B%5Cn%20%20%20%20curl_setopt(%24ch%2C%20CURLOPT_SSL_VERIFYHOST%2C%20FALSE)%3B%5Cn%20%20%20%20%24result%20%3D%20curl_exec(%24ch)%3B%5Cn%20%20%20%20curl_close(%24ch)%3B%5Cn%20%20%20%20return%20%24result%3B%5Cn%7D%5Cn%24result%20%3D%20getCurl('http%3A%2F%2Fapi.autofelix.cn%2Fuserinfo')%3B%5Cnreturn%20%24result%3B%22%2C%22id%22%3A%22IexHs%22%7D"></div><ul><li><strong>后端语言的设置</strong><br /></li><li>主要通过后端语言主动设置跨域请求，这里以 <code>php</code> 作为案例<br /></li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22php%22%2C%22code%22%3A%22%3C%3Fphp%5Cn%2F%2F%20%E5%85%81%E8%AE%B8%E6%89%80%E6%9C%89%E5%9F%9F%E5%90%8D%E8%AE%BF%E9%97%AE%5Cnheader('Access-Control-Allow-Origin%3A%20*')%3B%5Cn%2F%2F%20%E5%85%81%E8%AE%B8%E5%8D%95%E4%B8%AA%E5%9F%9F%E5%90%8D%E8%AE%BF%E9%97%AE%5Cnheader('Access-Control-Allow-Origin%3A%20https%3A%2F%2Fautofelix.com')%3B%5Cn%2F%2F%20%E5%85%81%E8%AE%B8%E5%A4%9A%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E8%AE%BF%E9%97%AE%5Cnstatic%20public%20%24originarr%20%3D%20%5B%5Cn%20%20%20'https%3A%2F%2Fautofelix.com'%2C%5Cn%20%20%20'https%3A%2F%2Fbaidu.com'%2C%5Cn%20%20%20'https%3A%2F%2Fcsdn.net'%2C%5Cn%5D%3B%5Cn%2F%2F%20%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E8%B7%A8%E5%9F%9F%E5%9F%9F%E5%90%8D%5Cn%24origin%20%3D%20isset(%24_SERVER%5B'HTTP_ORIGIN'%5D)%20%3F%20%24_SERVER%5B'HTTP_ORIGIN'%5D%20%3A%20''%3B%5Cnif%20(in_array(%24origin%2C%20self%3A%3A%24originarr))%20%7B%5Cn%20%20%20%20%2F%2F%20%E5%85%81%E8%AE%B8%20%24originarr%20%E6%95%B0%E7%BB%84%E5%86%85%E7%9A%84%20%E5%9F%9F%E5%90%8D%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE%5Cn%20%20%20%20header('Access-Control-Allow-Origin%3A'%20.%20%24origin)%3B%5Cn%20%20%20%20%2F%2F%20%E5%93%8D%E5%BA%94%E7%B1%BB%E5%9E%8B%5Cn%20%20%20%20header('Access-Control-Allow-Methods%3APOST%2CGET')%3B%5Cn%20%20%20%20%2F%2F%20%E5%B8%A6%20cookie%20%E7%9A%84%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE%5Cn%20%20%20%20header('Access-Control-Allow-Credentials%3A%20true')%3B%5Cn%20%20%20%20%2F%2F%20%E5%93%8D%E5%BA%94%E5%A4%B4%E8%AE%BE%E7%BD%AE%5Cn%20%20%20%20header('Access-Control-Allow-Headers%3Ax-requested-with%2CContent-Type%2CX-CSRF-Token')%3B%5Cn%7D%22%2C%22id%22%3A%22YGmdg%22%7D"></div><div><br /></div>