跨越相关知识（JSONP、Nginx 反向代理（ proxy））

为什么会存在跨域这个问题

因为存在浏览器同源策略，所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到，跨域限制主要的目的就是为了用户的上网安全。

浏览器的同源策略

同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

同源的定义

所谓同源是指：两个页面具有相同的域名、协议、端口，三个要素缺一不可。

跨域的原理

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。
同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。
跨域原理，即是通过各种方式，避开浏览器的安全限制。

跨域解决方案

有以下几种办法：

分享几个常用到的办法：

• 1、JSONP：

（Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链 接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是 返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。）

步骤：

1. 去创建一个script标签
2. script的src属性设置接口地址
3. 接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
4. 通过定义函数名去接受返回的数据

//动态创建 script
var script = document.createElement('script');

// 设置回调函数
function callbackFunction(data) {
    console.log(data);
}

//设置 script 的 src 属性，并设置请求地址
script.src = 'https://api.ycsnews.com/test?callback=callbackFunction';

// 让 script 生效
document.body.appendChild(script);

JSONP 的缺点: JSON 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据。

• 2、Nginx 反向代理（ proxy）
  配置一个代理服务器，反向代理访问跨域的接口
  跨域配置：
  （Vue-CLI 是基于 webpack 的，通过 webpack-dev-server 在本地启动脚手架，也就是在本地启动了一个 Node 服务，来实时监听和打包编译静态资源，由于都是封装好的，只需要配置即可，我们在 vue.config.js 中配置代理如下：）

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://www.hahaha.com'
    }
  }
}

如上所示时，当你请求 /api/abc 接口时就会被代理到 http://www.hahaha.com/api/abc

其他跨越解决办法详解可跳转至跨越解决方案