解决跨域的方法（Cros，nginx，Jsonp）

跨域

1. 为什么会产生跨域？

   浏览器的同源策略------>限制源文档与其他源文档的交互来保护浏览器
   

2. 什么是跨域？

   跨域，是指浏览器不能执行其他网站的脚本。
   同源策略限制了一下行为：
   Cookie、LocalStorage 和 IndexDB 无法读取
   DOM 和 JS 对象无法获取
   Ajax请求发送不出去
   

3. 产生跨域的条件

   跨域场景:
   首先狭义的同源就是指，域名、协议、端口均为相同，则不跨域，若有一个不同则为跨域。
   
   跨域场景例子：
   http://www.xxxyyy.cn/index.html 调用  http://www.xxx.cn/server.php  跨域,主域名不同
   
   http://abc.xxxyyy.cn/index.html 调用  http://def.xxxyyy.cn/server.php  跨域,子域名不同 (www这样的前缀是子域名)
   
   http://www.xxx.cn:8080/index.html 调用  http://www.xxx.cn/server.php  跨域,端口不同
   
   https://www.xxx.cn/index.html 调用  http://www.xxx.cn/server.php  跨域,协议不同
   另外：localhost 调用  127.0.0.1   跨域
   
   如果是协议和端口造成的跨域问题“前台”是无能为力的
   

4. 处理跨域–常用的三种方法 --最常用cros和nignx

   1.JsonP

   jsonP跨域是一种代理模式，在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的;只支持GET请求;
   
   原生使用<script scr="url?callback=func">携带回调函数传递到服务器-服务器准备数据返回func('json数据')
   jquery
   $.ajax({
       url: 'url',
       type: 'get',
       dataType: 'jsonp',  // 请求方式为jsonp
       jsonpCallback: "callbackFunc", // 自定义回调函数名
       data: {}
   });
   

   2. CORS

   普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
   
    以nodejs为例设置cors跨域
    const express = require("express");
    const cors = require("cors")
    const app = express()
    //使用第三方中间件解决跨域
    app.use(cors())
   
    //自定义cors设置支持跨域的请求
    var cors = function(req,res,next()){
    res.header('Access-Control-Allow-Origin', 'http://localhost:8088');//请求地址
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');//请求方式
    res.header('Access-Control-Allow-Headers', 'Content-Type');//请求头
    next()
    }
    app.use(cors)
   

   3.nginx代理

   前端配置在vue.config.js中
    devServer: {
       progress: true, //是否启动进度日志
       open: false, //配置自动启动浏览器
       host: "127.0.0.1",//前端url
       port: process.env.VUE_APP_port,
       https: false,
       hotOnly: false,
       proxy: { //代理设置  public目录下没有相应的文件时代理生效
         '^/jsonProxy': {
           target: process.env.VUE_APP_proxy_target,
           changeOrigin: true, //跨域设置，默认true为跨域
           ws: false, //是否代理websockets
           pathRewrite: { //重写路径
             '^/jsonProxy': '/json'
           }
         },
         '^/commonApi': { //公共接口代理
           target: "http://1.1.1.1:8080",//后端url
           changeOrigin: true, //跨域设置，默认true为跨域
           ws: false, //是否代理websockets
           pathRewrite: { //重写路径
             '^/commonApi': '/app'
           }
         }
       }
     },
    
   4.使用iframe传递的三种方式
   	document.domain + iframe跨域
   	location.hash + iframe跨域
   	window.name + iframe跨域
   5.postMessage