Webpack 配置 proxy 代理解决跨域问题

JS跨域及解决方案 介绍了跨域的基本概念和解决方案，但是在开发中，我们就需要采用新的技术去实现。
浏览器发送请求到非同源服务器，会导致跨域问题，而服务器与服务器之间的通信是不存在跨域问题的，因此我们在本地 npm run serve 搭建的服务器，先接收到我们的请求，之后由本地服务器转发请求到目标服务器即可获取资源，再将资源从本地服务器发送给浏览器，这是 Webpack 中配置 devServer 解决跨域的思路。
1、在webpack配置文件的devServer里面配置如下信息

2、2 配置中的主要参数说明

在根目录创建vueconfigjs
moduleexports = {
devServer: {
proxy: {
"/api": {
target: " >你好，解决服务器间的跨域问题最常用的解决方案就是利用web服务器本身提供的proxy功能，如apache和lig>

什么是跨域？
跨域是通俗的说是从一个域名去请求另一个域名的资源。比如从 背后的基本思想是使用自定义的>

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的 源 。

举个例子：

下表给出了相对 >

主流的 前后端分离模式 下，当前端调用后台接口时，由于是在非同一个域下的请求，从而会引发 浏览器 的自我安全保护机制，最终结果是 接口成功请求并响应 ，但 前端不能正常处理该返回数据 。

因此，当 同时满足 以下三个条件的情况下，就会出现跨域问题：

想要彻底解决跨域问题，只需要破坏以上三个条件的任一即可：

添加浏览器启动参数： chrome --disable-web-security ，但是极不推荐这种解决方式。

Jsonp，全称 JSON with Padding ，一种非官方的协议，而是一种约定；前端通过向后台发送 script 类型请求解决跨域，此时接口响应的 application/javascript 类型的数据会作为 callback 函数的参数进行处理。

所以，后台也需要做相应的处理。以 Java 为例，添加如下配置即可：

综上， jsonp 请求存在以下几个弊端：

用 Nginx 或 Apache 来代理调用方的请求（ 客户端变更为相对路径请求，而非绝对路径 ），此时对于浏览器来说，由于请求是同源的，因此就不存在跨域问题。

以 Java 应用为例，添加如下全局配置：

如果只想针对某个类下的接口，或者是某个具体的接口配置允许跨域，只需要在相应的地方添加注解 @CrossOrigin 即可。

如果配置了 nginx 作为代理服务器，那么只需要为 nginx 添加支持跨域请求即可：

Q1：浏览器在执行跨域请求时，是先执行后判断，还是先判断后执行？
A1：都有可能，这需要根据所发送的请求是 简单请求 还是 非简单请求 来判断；如果是非简单请求，浏览器每次在执行真正的请求之前，还会先发送一个 options 请求方式的预检命令 可设定缓存时长，取消每次请求都要预检，提高效率，参考上面的服务端配置 。关于两种请求的区分及定义，参考下图说明：

Q2：如果是允许带（ 被调用方 ） cookie 的跨域请求，此时服务端同样配置为 Access-Control-Allow-Origin 等于 ，前端是否还可以请求成功？
A2：不可以，此时要将 Access-Control-Allow-Origin 指定为 调用方 具体的域 可以先取得调用方的域再动态配置，这样就不存在多个域请求的限制问题 ，并且添加配置 Access-Control-Allow-Credentials 为 true 。

可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。
如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。

---