跨域：JavaScript 出于安全方面的考虑，不允许跨域调用其他页面的对象。

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

vue 框架的跨域

原理：利用 webpack + webpack-dev-server 代理接口跨域

webpack.config.js 部分配置

module.exports = {
  devServer: {
    host: 'localhost', //本地域名
    port: '8080', // 端口号
    open: true, // 自动打开网站
    proxy: {
      '/api': {
        target: 'http://localhost:3000/', // 代理的服务器
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 请求时将url中从api开始替换为""
        }
      }
    }
  }
}

JSONP 跨域

jsonp 的原理就是利用< script >标签没有跨域限制，通过< script >标签 src 属性，发送带有 callback 参数的 GET 请求，服务端将接口返回数据拼凑到 callback 函数中，返回给浏览器，浏览器解析执行，从而前端拿到 callback 函数返回的数据。

原生方法

let dom = document.createElement('script')
// src属性帮助我们访问 接口 返回的是一段js代码 返回的代码格式是
dom.src = 'https://api.map.baidu.com/geocoder/v2/?callback=renderReverse&output=json&pois=1&ak=ZwTVu16RLXjhW7FHDjYt5HfMnR1dhFpR'
let body = document.getElementsByTagName('body')[0]
body.appendChild(dom) // 往 body 里追加 dom
// 我们需要定义一个fn去接收这个实参
function fn(val) {
  console.log(val)
}

vue 方法

npm install vue-jsonp --save

// main.js挂载
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)

this.$jsonp('https://api.map.baidu.com/geocoder/v2/?callback=renderReverse&output=json&pois=1', {
  ak: 'ZwTVu16RLXjhW7FHDjYt5HfMnR1dhFpR'
}).then(res => {
  console.log(res)
})

cors 资源共享

原理：CORS 是跨源资源分享,其本质是设置响应头，使得浏览器允许跨域请求

前端配置

请求加上配置withcreadential：true

1.原生：xhr.withCredentials = true;

2.axios： axios.defaults.withCredentials = true

3.ajax： $.ajax({ url: 'xxx', type: 'put', xhrFields: { withCredentials: true }, crossDomain: true });

后端配置

后台：配置 access-control-allow-origin:*，

前端：不用做任何操作，即可访问

缺点：前端请求头不会带上cookie，后台无法获取当前会话id（sesseionId）

nginx 代理跨域