解决跨域的几种方法

今天给大家分享一下，解决跨域的几种方法：
要想解决掉跨域，首页我们要知道什么是跨域？
1.什么是跨域?
跨域其实就是指我们从一个域名去请求到另一个域名，就理解为跨域。更严格的来说的话，跨域就是当它的域名、协议、端口有一个不同的话，就会被当做跨域。

浏览器不能执行其他域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制。那么这里我们又会说到一个东西了。
2.什么是同源策略？
同源策略就是指域名、协议、端口相同，当页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

同源策略一般又分为以下两种：
DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
3.为什么要跨域？
现实工作开发中经常会有跨域的情况，因为公司会有很多项目，也会有很多子域名，各个项目或者网站之间需要相互调用对方的资源，避免不了跨域请求。

那么怎么去解决这个跨域问题呢
跨域解决方案
document.domain + iframe跨域

location.hash + iframe

window.name + iframe跨域

postMessage跨域

跨域资源共享（CORS）

nginx代理跨域

nodejs中间件代理跨域

WebSocket协议跨域

1、通过jsonp设置解决跨域
在使用XMLHTTPRequest对象发送HTTP请求时，会遇到同源策略问题，域不同请求会被浏览器拦截。这时就可以选择绕过，或者说是不使用XMLHTTPRequest对象进行发送跨域HTTP请求。 在平常写html时会发现比如

<script src="http://www.a.com/script/1.js"></script>
<img src="http://www.b.com/1.jpg">
<link href="http://www.c.com/1.css">          

这种的标签一般都不具备有‘跨域’的问题
·jsonp

               <!-- HTML表头部分-->
                        ...
                        <!--  javaScript片段1-->
                        // 如果jsonp 的请求为GET
  if ( ctx.method === 'GET' && ctx.url.split('?')[0] === '/getData') {
 
    // 获取jsonp的callback
    let callbackName = ctx.query.callback || 'callback'
    let returnData = {
      success: true,
      data: {
        text: 'this is a jsonp api',
        time: new Date().getTime(),
      }
    }
 
    // jsonp的script字符串
    let jsonpStr = `;${callbackName}(${JSON.stringify(returnData)})`
 
    // 用text/javascript，让请求支持跨域获取
    ctx.type = 'text/javascript'
 
    // 输出jsonp字符串
    ctx.body = jsonpStr
 
  } else {
 
    ctx.body = 'hello jsonp'
 
  }
})

2、通过NGINX的反向代理
nginx支持配置反向代理，通过反向代理实现网站的负载均衡。这部分先写一个nginx的配置，后续需要深入研究nginx的代理模块和负载均衡模块。 nginx通过proxy_pass_http 配置代理站点，upstream实现负载均衡。

3、域名反向代理

在项目config找到index.js文件 在dev中找到proxyTable添加:

proxyTable: {
    '/': {
      target: 'http://xxxxxx', //你要访问的服务器域名
      changeOrigin: true, //允许跨域
      pathRewrite: {
          '^/': ''
      }
  }
},