关于两台服务器之间的跨域问题

  两个不同端口的服务器之间进行请求和回复请求会出现跨域问题，从而导致无法拿到数据，其中请求发出去了，另一个服务器也回复请求了，但是违反了同源协议，导致回复被浏览器扣下，那如何解决这个问题呢？先了解一下什么叫同源策略。

同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
同源策略是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。 非同源的客户端脚本在没有明确授权的情况下，不能读写对方资源，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

跨域问题

跨域是指跨域名的访问，以下情况都属于跨域：

跨域原因说明 示例
域名不同 www.jd.com 与 www.taobao.com
域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081
二级域名不同 http://item.jd.com 与 http://miaosha.jd.com

解决方法

1.cors跨域（配置一些响应头）：

cors：全称"跨域资源共享"（Cross-origin resource sharing）。

cors需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持cors，IE则不能低于IE10。cors的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。所以，实现cors的关键在于服务器，只要服务器实现cors接口，就可以实现跨域通信。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

对于简单请求，浏览器会直接发送cors请求，具体说来就是在header中加入origin请求头字段。同样，在响应头中，返回服务器设置的相关CORS头部字段，Access-Control-Allow-Origin字段为允许跨域请求的源。请求时浏览器在请求头的Origin中说明请求的源，服务器收到后发现允许该源跨域请求，则会成功返回。

配置cros在项目当中基本上都是由后端开发人员配置的。

2.jsonp跨域（利用script中的src，但是只能发送get请求）

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSONP数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。而动态添加一个<script>标签，script标签的src属性是没有跨域的限制的。这样一来,这种跨域方式就与ajax XmlHttpRequest协议无关了。 我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象,这种跨域的通讯方式称为JSONP。

JSONP的优点是：它不像XmlHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行（IE跨域要用JSONP来解决），不需要XmlHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

限制：
需要服务的支持
只能发起GET请求

3.配置一个代理服务器（proxy）

如图原理，配置一个跟本地服务器端口号一样的代理服务器，将请求进行换装，在发送请求和返回请求都进行换装，从而解决跨域问题。

如何开启一个代理服务器呢？

1.nginx反向代理

多用于后端开发人员

2.vue-cli（devSever.proxy）

devServer.proxy可以是一个指向开发环境API服务器的字符串

module.esports={
devServer: {
proxy:'http://localhost:4000'
    }
}

vue脚手架配置代理

方法一：在vue.config.js中添加以下配置：

devServer:{
    proxy:"http://localhost:5000"
}

优点：配置简单，请求资源时直接发给前端（8080）即可

缺点：不能配置多个代理，不能灵活的控制代理请求是否走代理

工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二：编写vue.config.js配置具体的代理规则：

优点：可以配置多个代理，，且可以灵活的控制请求是否走代理

缺点：配置略微繁琐，请求时必须加前缀、

注意：

pathRewrite（必写）：重写路径，防止找不到正确的路径

前缀：要写在端口号后面，例如http://localhost:8080/前缀/请求信息