解决跨域问题（详解9种方法）

同源策略：端口号、协议、域名相同 。

一、为什么会出现跨域问题
        出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

二、什么是跨域
        当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。为了保证用户信息的安全性，防止恶意窃取当前网站的数据，禁止不同域直接与js代码交互。

分布式项目：把后台放在一个服务器里，把前台放在一个服务器中，防止文件相互损坏，防止一个模块导致所有程序运行不起来，可以前后台同时开发，用来节省时间。

跨域限制：

无法获取dom，ajax不能发送，cookie、localstorage、indexDB等本地存储不能读取

解决跨域的方法：

不常用方法

1.document.domain.iframe 解决跨域
  当前页面请求路径，iframe另一个域名的路径
  var iframe = document.getElementById("iframe");
  iframe.contentWindow.document.DOM
  
2.window.name](http://2.window.name) + iframe 解决跨域
  在iframe下嵌入一个外网的地址，获取iframe下的元素
  [window.name](http://window.name) = "XXX"
  window.location = url
  另一个页面中访问：window.name.document
  
3.location.hash + iframe 解决跨域
  location.hash = ""

常用方法：

4.Web Workers 解决跨域
  window.postMessage()
    window.postMessage("发送的内容");
    window.onMessage = function(data){//data接收参数}

5.websocket 解决跨域
  必须要有后台，通过websocket对象，向后台传递。
  var s = new WebSocket("路径")//ws的路径 包括外网
  s.send(发送的数据)
  window.onMessage = function(data){//data接收参数}

6.jsonp + ajax连用 解决跨域 
  用来解决原生ajax和jquery
  function fun(){}
  ajax.callback = fun

7.后台解决方式：CORS跨域资源共享

*** 8.nginx服务器 解决跨域
  在Nginx里html文件夹下，放置项目
  在conf文件夹下，修改配置文件，设置服务器参数：端口号，地址，
  默认首页，错误页面，代理地址(解决跨域)
  
*** 9.vue 和 react 配置项目文件
  vue.config.js 配置文件：跨域，全局变量等
  在vue的配置文件中设置代理：
  module.exports = { //导出对象
    devServer: { //设置代理服务器
    open: true, //允许
    host: 'localhost', //vue的地址
    port: 8080, //端口号
    //这里的ip和端口是前端项目的;下面为需要跨域访问后端项目
    proxy: { //外网代理信息对象
      '/api': { //设置访问服务器的名称
      target: '[http://wthrcdn.etouch.cn/](http://wthrcdn.etouch.cn/)',
      //这里填入你要请求的接口的前缀
      ws:true,//代理websocked
      changeOrigin:true,//虚拟的站点需要更管origin
      secure: true, //是否https接口
      pathRewrite:{
        '^/api':''//重写路径
      },
      headers: {
        referer: '[http://wthrcdn.etouch.cn/](http://wthrcdn.etouch.cn/)',
         //这里后端做了拒绝策略限制，请求头必须携带referer，否则无法访问后台
      }
      }
    }
    }
  }