跨域问题

一时失言乱红尘 2021-09-03 08:04 672阅读 0赞

# 一.http #

（一）.http请求的推演过程  
        1.  url(www.baidu.com)  =>进行DNS域名解析 => 得到 ip  (192.168.1.2)   
        2. 拿到ip 去跟服务器建立 tcp 连接  
        3. 建立 tcp 连接之后发起 http 请求  （ tcp是比http更底层一个连接协议）（ip是tcp下面一层）  
        4. http连接建立之后 服务器把html 发送给浏览器  
        5. 浏览器解析html（js文件，css文件，图片 下载 运行）  
        6. 浏览器渲染html  
        7. 服务器关闭连接  tcp  http  
        ip 上一层 是tcp  ，上一层是http  
        DNS域名解析采用的是递归查询的方式，过程是，  
        先去找浏览器自身域名缓存区查找-》操作系统的域名缓存查找-》hosts查找-》域名服务器查找  
        TCP是一个端到端的可靠的面相连接的协议，HTTP基于传输层TCP协议不用担心数据传输的各种问题  
（二）.tcp三次握手  
        第一次握手：建立连接时，客户端发送syn包（syn=x）到服务器，并进入SYN\_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。  
        第二次握手：服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（syn=y），即SYN+ACK包，此时服务器进入SYN\_RECV状态；   
        第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=y+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

# 二. Request Headers的属性 #

**请求报文：HTTP协议使用TCP协议进行传输，在应用层协议发起交互之前，首先是TCP的三次握手。完成了TCP三次握手后，客户端会向服务器发出一个请求报文**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

HTTP最常见的请求头如下：

Accept   
作用： 浏览器端可以接受的媒体类型,  数据类型  
例如： Accept: text/html 代表浏览器可以接受服务器回发的类型为 text/html 也就是我们常说的html文档,如果服务器无法返回text/html类型的数据,服务器应该返回一个406错误(non acceptable)。

通配符 \* 代表任意类型   
例如 Accept: \*/ \*代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)。

Accept-Encoding：   
作用： 浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate），（注意：这不是只字符编码），例如：Accept-Encoding: gzip, deflate

Accept-Language   
作用： 浏览器申明自己接收的语言。当服务器能够提供一种以上的语言版本时要用到；   
语言跟字符集的区别：中文是语言，中文有多种字符集，比如big5，gb2312，gbk等等，例如： Accept-Language:zh-CN,zh;q=0.8 。

Authorization：授权信息，通常出现在对服务器发送的WWW-Authenticate头的应答中；

也可以把token的值放在这里，传给服务器

Connection   
例如：　Connection: keep-alive 当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。

例如： Connection: close 代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭， 当客户端再次发送Request，需要重新建立TCP连接。

Content-Length：表示请求消息正文的长度；

Cache-Control：缓存控制，服务器通过控制浏览器要不要缓存数据

Cookie:客户机通过这个可以向服务器带数据

From：请求发送者的email地址，由一些特殊的Web客户程序使用，浏览器不会用到它；

Host（发送请求时，该报头域是必需的）   
作用: 请求报头域主要用于指定被请求资源的Internet主机和端口号，它通常从HTTP URL中提取出来的。

例如: 我们在浏览器中输入：[http://www.hzau.edu.cn][http_www.hzau.edu.cn]   
浏览器发送的请求消息中，就会包含Host请求报头域，如下：Host：www.hzau.edu.cn 此处使用缺省端口号80，若指定了端口号，则变成：Host：指定端口号。

Referer   
当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。比如从我主页上链接到一个朋友那里，他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。

If-Modified-Since：只有当所请求的内容在指定的日期之后又经过修改才返回它，否则返回304“Not Modified”应答； Pragma：指定“no-cache”值表示服务器必须返回一个刷新后的文档，即使它是代理服务器而且已经有了页面的本地拷贝；

User-Agent   
作用：浏览器类型；告诉HTTP服务器， 客户端使用的操作系统和浏览器的名称和版本。

UA-Pixels，UA-Color，UA-OS，UA-CPU：由某些版本的IE浏览器所发送的非标准的请求头，表示屏幕大小、颜色深度、操作系统和CPU类型。

我们上网登陆论坛的时候，往往会看到一些欢迎信息，其中列出了你的操作系统的名称和版本，你所使用的浏览器的名称和版本，这往往让很多人感到很神奇，实际上，服务器应用程序就是从User-Agent这个请求报头域中获取到这些信息User-Agent请求报头域允许客户端将它的操作系统、浏览器和其它属性告诉服务器。

例如： User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)。

另外，访问一些其他的URL的时候，request 的Header里面一些其他的字段，下面来进行列举：

比如我在登录一个需要用户名密码登录的网站时Request Header里面就有上面还没有提到过的字段。

# 三.Response Headers #

**响应报文**：当收到get或post等方法发来的请求后，服务器就要对报文进行响应。

<table> 
 <thead> 
 <tr> 
 <th>属性</th> 
 <th>备注</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>Access-Control-Allow-Origin</td> 
 <td>该站点可以被哪些网站进行&nbsp;跨域资源共享 Access-Control-Allow-Origin:&nbsp;<a href="http://example.com:8080/" rel="nofollow">http://example.com:8080</a>&nbsp;<a href="http://foo.example.com/" rel="nofollow">http://foo.example.com</a> Access-Control-Allow-Origin:*</td> 
 </tr> 
 <tr> 
 <td>Accept-Ranges</td> 
 <td>服务器是否支持资源范围请求 资源范围请求：指按byte为单位，请求资源的某一段数据 例如请求一个文件的200byte—400byte的数据 Accept-Ranges：bytes 表示该资源支持byte形式资源范围请求 Accept-Ranges：none则表示不支持</td> 
 </tr> 
 <tr> 
 <td>Age</td> 
 <td>一个资源存在于代理中&nbsp;缓存的时间，单位是秒</td> 
 </tr> 
 <tr> 
 <td>Allow</td> 
 <td>一个资源允许哪些HTTP方法进行请求 Allow: GET, HEAD Allow:*</td> 
 </tr> 
 <tr> 
 <td>Cache-Control</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>Connection</td> 
 <td>连接方式 Connection:keep-alive Connection:close</td> 
 </tr> 
 <tr> 
 <td>Content-Encoding</td> 
 <td>服务器对响应数据的编码方式，但这里的编码方式不同于编码字符集(GB2312,UTF-8等)，而是(通常)指压缩方式 Content-Encoding:gzip</td> 
 </tr> 
 <tr> 
 <td>Content-Language</td> 
 <td>响应数据的自然语言 Content-Language:ZH-CN</td> 
 </tr> 
 <tr> 
 <td>Content-Length</td> 
 <td>响应数据的数据长度，单位是byte Content-Length:1024</td> 
 </tr> 
 <tr> 
 <td>Content-Location</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>Content-MD5</td> 
 <td>基于base64编码的回应数据的MD5校验和 Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ==</td> 
 </tr> 
 <tr> 
 <td>Content-Disposition</td> 
 <td>当客户端请求的资源是一个可下载的资源（这里的“可下载”是指浏览器会弹出下载框或者下载界面）时，对这个可下载资源的描述（例如下载框中的文件名称）就是来源于该头域。 Content-Disposition: attachment; filename=”some_app.exe”</td> 
 </tr> 
 <tr> 
 <td>Content-Range</td> 
 <td>如果当前这个响应数据是整个资源的一部分时，是具体的哪一部分（从第几byte到第几byte）。 在请求中，客户端可以通过设定”Range”头域来通知服务器其只想请求整个资源中某一段数据，而对应的，当服务器响应这种请求，并发送某一段数据到客户端的时候，必须通过Content-Range头来告诉客户端当前的响应数据是整个资源的第几byte到第几byte。这个在资源的分段下载和续点下载应用中很有用。 Content-Range:500-900</td> 
 </tr> 
 <tr> 
 <td>Content-Type</td> 
 <td>服务器告诉浏览器它发送的数据属于什么文件类型，也就是响应数据的MIME类型 Content-Type: text/html; charset=utf-8，让浏览器把接收到的实体内容以HTML格式解析 Content-Type: text/plain; charset=utf-8，让浏览器把接收到的实体内容以普通文本解析</td> 
 </tr> 
 <tr> 
 <td>Date</td> 
 <td>响应消息发送的GMT格式日期 Date: Tue, 15 Nov 1994 08:12:31 GMT</td> 
 </tr> 
 <tr> 
 <td>ETag</td> 
 <td>资源的一个标识，类似于key-value pair（键值对）中的key。 ETag通常用于校验一个资源实体有没有被修改过。 在数据缓存和PUT方法更新资源时候有用处。 ETag: “737060cd8c284d8af7ad3082f209582d”</td> 
 </tr> 
 <tr> 
 <td>Expires</td> 
 <td>告诉客户端该响应数据会在指定的时间过期，通常用于给客户端缓存作为参考。 Expires: Thu, 01 Dec 1994 16:00:00 GMT</td> 
 </tr> 
 <tr> 
 <td>Last-Modified</td> 
 <td>客户端所请求的资源的最后修改时间。</td> 
 </tr> 
 <tr> 
 <td>Link</td> 
 <td>描述当前被请求的资源和另外一个资源的关系。这种关系被定义在RFC5988。 Link: ; rel=”alternate”</td> 
 </tr> 
 <tr> 
 <td>Location</td> 
 <td>用户通知客户端转跳(重定向)到另一个URL Location:&nbsp;<a href="http://www.w3.org/pub/WWW/People.html" rel="nofollow">http://www.w3.org/pub/WWW/People.html</a></td> 
 </tr> 
 <tr> 
 <td>P3P</td> 
 <td>Platform for Privacy Preferences Project的缩写，表示本站点遵守P3P协议(标称本站点不会违法使用用户信息)并希望收集用户信息。不过P3P目前使用并不广泛，特别国内并不重视P3P。 P3P:CP=”your_compact_policy”。</td> 
 </tr> 
 <tr> 
 <td>Pragma</td> 
 <td>在请求/响应链上附近的一些参数</td> 
 </tr> 
 <tr> 
 <td>Proxy-Authenticate</td> 
 <td>访问代理时需要使用的验证方式。 Proxy-Authenticate: Basic</td> 
 </tr> 
 <tr> 
 <td>Refresh</td> 
 <td>用于令客户端在指定N秒后转跳到另外一个URL。 Refresh:6,<a href="http://www.google.com.hk/" rel="nofollow">http://www.google.com.hk</a>&nbsp;6秒后转跳到google</td> 
 </tr> 
 <tr> 
 <td>Retry-After</td> 
 <td>用于因为某些原因（例如该资源暂时无效）通知客户端在指定时间后重新尝试请求，时间单位为秒。 Retry-After:60 一分钟后重新尝试请求该资源。</td> 
 </tr> 
 <tr> 
 <td>Server</td> 
 <td>服务器的名称 Server: Apache/2.4.1 (Unix)</td> 
 </tr> 
 <tr> 
 <td>Set-Cookie</td> 
 <td>对客户端设置cookie Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1</td> 
 </tr> 
 <tr> 
 <td>Strict-Transport-Security</td> 
 <td>用于指示客户端如何对HTTPS进行缓存（缓存多长时间）以及是否对子域生效。 Strict-Transport-Security: max-age=16070400; includeSubDomains</td> 
 </tr> 
 <tr> 
 <td>Trailer</td> 
 <td>当响应资源已chunked编码传输时，每个Chunked-Body尾部的额外数据。</td> 
 </tr> 
 <tr> 
 <td>Transfer-Encoding</td> 
 <td>响应内容的传输编码方式，通常有 chunked, deflate, gzip等。</td> 
 </tr> 
 <tr> 
 <td>Vary</td> 
 <td> 用来指示缓存代理（例如squid）根据什么条件去缓存一个请求。 Vary: Accept-Encoding Vary: Accept-Encoding,User-Agent Vary: X-Some-Custom-Header,Host Vary: * Vary:Origin;&nbsp; 告诉CDN等，响应是基于请求者Origin头值进行协商的;CORS 请求会带上 Origin请求头，用来向别人的网站表明自己是谁 ,根据Access-Control-Allow-Origin 联系的 </td> 
 </tr> 
 <tr> 
 <td>Via</td> 
 <td>告诉客户端，该回应经历了那些代理。 Via: 1.0&nbsp;<a href="http://example1.com/" rel="nofollow">example1.com</a>, 1.1&nbsp;<a href="http://example2.com/" rel="nofollow">example2.com</a>&nbsp;(Apache/1.1)</td> 
 </tr> 
 <tr> 
 <td>WWW-Authenticate</td> 
 <td> 表示当前是用什么验证方式访问一个资源。 WWW-Authenticate:base &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

X-Powered-By:服务器告知客户机网站是用何种语言或框架编写的。

Header属性分类  
1、通用信息头  
即能用于请求消息中,也能用于响应信息中,但与被传输的实体内容没有关系的信息头,如Data,Pragma

主要: Cache-Control , Connection , Data , Pragma , Trailer , Transfer-Encoding , Upgrade

2、请求头  
用于在请求消息中向服务器传递附加信息,主要包括客户机可以接受的数据类型,压缩方法,语言,以及客户计算机上保留的信息和发出该请求的超链接源地址等.

主要: Accept , Accept-Encoding , Accept-Language , Host ,

3、响应头  
用于在响应消息中向客户端传递附加信息,包括服务程序的名称,要求客户端进行认证的方式,请求的资源已移动到新地址等.

主要: Location , Server , WWW-Authenticate(认证头)

4、实体头  
用做实体内容的元信息,描述了实体内容的属性,包括实体信息的类型,长度,压缩方法,最后一次修改的时间和数据的有效期等.

主要: Content-Encoding , Content-Language , Content-Length , Content-Location , Content-Type

5、扩展头  
主要：Refresh, Content-Disposition

# 四. Access-Control-Allow-Origin，跨域 #

## 4.1、浏览器的同源安全策略 ##

浏览器只允许请求当前域的资源，而对其他域的资源表示不信任。那怎么才算跨域呢？

1.  请求协议`http,https`的不同
2.  域`domain`的不同
3.  端口`port`的不同

大概就是这么回事啦，下面我们讲2种中规中矩的办法：`CORS`，`JSONP`  
document.domain，window.name，web sockets暂不深究 : )

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]

## 解决跨域的方法？ ##

1 .jsonp --使用script 的src 发送 只能是get请求

2.cors 后台设置运行跨域  所有的后台语言都可以设置

3.服务器代理

## 4.2、CORS ##

全称是"跨域资源共享"（Cross-origin resource sharing）。其实呢，这个大部分还是后端人员的工作。我们先来看看整个流程下，都发生了什么？

在此之前，需要知道`简单请求` `复杂请求`这两个小朋友

1.  简单请求：  
    1): 请求方式只能是：`head`，`get`，`post`  
    2): 请求头允许的字段：`Accept`，`Accept-Language`，`Content-Language`，`Last-Event-ID`  
    `Content-Type`：application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一

2.复杂请求：不满足上面的情况

简单请求:

浏览器：要跨域，问服务器大哥肯不肯！往请求头添加`origin`亮一下牌面

`有个奇怪现象，谷歌游览器在非跨域情况下，也会发送origin字段`

![f63a693e51656306cbd9e1b692e858a2.webp][]

请求头origin字段为当前域

服务器：诶，你是谁，我来看看你的origin，嗯嗯，可以，符合我的要求，放行！顺便告诉你，老夫的规矩！

![ccfab9fc93c2687a73796324eade8fe5.webp][]

其中，最重要的就是`Access-Control-Allow-Origin`，标识允许哪个域的请求。当然，如果服务器不通过，根本没有这个字段，接着触发`XHR`的`onerror`，再接着你就看到浏览器的提示`xxx的服务器没有响应Access-Control-Allow-Origin字段`

上面第一行说到的`Access-Control-Allow-Origin`有多种设置方法：

1.  设置`*`是最简单粗暴的，但是服务器出于安全考虑，肯定不会这么干，而且，如果是\*的话，游览器将不会发送`cookies`，即使你的`XHR`设置了`withCredentials`
2.  指定域，如上图中的`http://172.20.0.206`，一般的系统中间都有一个`nginx`，所以推荐这种
3.  动态设置为请求域，多人协作时，多个前端对接一个后台，这样很方便

`withCredentials`：表示`XHR`是否接收cookies和发送cookies，也就是说如果该值是false，响应头的`Set-Cookie`，浏览器也不会理，并且即使有目标站点的cookies，浏览器也不会发送。

**复杂请求:**

最常见的情况，当我们使用`put`和`delete`请求时，浏览器会先发送`option`（预检）请求，不过有时候，你会发现并没有，这是后面我们会讲到缓存。

**预检请求**

与简单请求不同的是，option请求多了2个字段：  
`Access-Control-Request-Method`：该次请求的请求方式  
`Access-Control-Request-Headers`：该次请求的自定义请求头字段

服务器检查通过后，做出响应：

//指定允许其他域名访问
    'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
    //是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
    'Access-Control-Allow-Credentials:true'
    //预检结果缓存时间,也就是上面说到的缓存啦
    'Access-Control-Max-Age: 1800'
    //允许的请求类型
    'Access-Control-Allow-Methods:GET,POST,PUT,POST'
    //允许的请求头字段
    'Access-Control-Allow-Headers:x-requested-with,content-type'

这里有个注意点：`Access-Control-Request-Method`，`Access-Control-Request-Headers`返回的是满足服务器要求的所有请求方式，请求头，不限于该次请求，`我一次性告诉你了，别TM问我了`

**后端设置跨域的时候**：

浏览器的跨域，就是ip+端口是否跨域，深入点就是服务器指向内容地址是否同级，这个同级的概念，就是服务器都可以访问到的地址根目录

后端做了 跨域 处理，前端不用做跨域。后端做的跨域 在请求接口 的时候，可以看到如下，如果后端没有运行跨域的话，没有 Access-Control-Allow-Origin  返回

比如 php:

<?php
 header('Access-Control-Allow-Origin:*');
 header('Access-Control-Allow-Methods:GET,POST,PUT,POST');
 
 ?>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2][]

## 4.3、jsonp ##

jsonp的原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入，有种回调的味道！

例子：

jquery用法

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

缺点：它只支持`GET`请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

## 4.4  meta 里面控制的 ##

[https://www.fujieace.com/html/cors.html][https_www.fujieace.com_html_cors.html]

## 4.5 Webpack Proxy工作原理 （反向代理） ##

webpack添加proxy,也是nodejs做服务代理，还是为了服务端做处理。

**首先强调的是webpack proxy只能用作于开发阶段，临时解决本地请求服务器（通常是测试服）产生的跨域问题，并不适用线上环境**。配置在webpack的 `devServer` 属性中。

有人可能会误会线上环境就是正式服，曾就有人利用process.env.NODE_ENV来区分测试服和生产服。 其实不然。
      对于node_env来说，默认只有两种状态即development和production，前者指代本地开发即localhost环境，而后者代表发布在任何服务上的服务，node是不知道你服务是测试还是正式，除非你手动指定。通常认为都是线上环境。

## 设置 proxy 目的 ##

为解决在本地开发时XHR异步请求跨域问题（如果你的后端小伙伴愿意给你处理，无需配置）

## 原理 ##

webpack中的`proxy`只是一层代理，用于把指定的`path`，代理去后端提供的地址，背后使用node来做server。可能有人疑惑，为什么只适用本地开发？因为该技术只是在webpack打包阶段在本地临时生成了node server，来实现类似nginx 的`proxy_pass`的反向代理效果

`proxy`工作原理实质上是利用`http-proxy-middleware` 这个http代理中间件，实现请求转发给其他服务器。例如：本地主机A为`http://localhost:3000`，该主机浏览器发送一个请求，接口为`/api`，这个请求的数据（响应）在另外一台服务器B`http://10.231.133.22:80`上，这时，就可以通过A主机设置webpack proxy，直接将请求发送给B主机。

var express = require('express');
    var proxy = require('http-proxy-middleware');
    
    var app = express();
    
    app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
    app.listen(3000);
    
    // http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

必须配置**`changeOrigin= true`**

## 核心概念 ##

var proxy = require('http-proxy-middleware');
    
    var apiProxy = proxy('/api', {target: 'http://www.example.org'});
    //                   \____/   \_____________________________/
    //                     |                    |
    //                   context             options

*  **content：**用于定义哪些请求需要被目标主机代理
 *  **option.target：**目标主机（协议+主机名）

也可以简写 `var apiProxy = proxy('http://www.example.org/api');`

**option的几种配置**  
`option.pathRewrite`: 重写目标的url路径，`key`用正则表达式来匹配路径

// 重写路径
    pathRewrite: {'^/old/api' : '/new/api'}
    
    // 移除路径
    pathRewrite: {'^/remove/api' : ''}
    
    // 添加基础路径
    pathRewrite: {'^/' : '/basepath/'}
    
    // 路径自定义
    pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }

**vue 使用过程中设置：**

**a 浏览器https://****localhost:8080  b的后端**[http://172.16.10.21:8001][http_172.16.10.21_8001] ，接口地址是：[http://172.16.10.21:8001][http_172.16.10.21_8001]/xs/setName

**1.请求接口**

如果没有跨域的时候，直接这样请求
     axios.get('http://172.16.10.21:8001/xs/setName')
                .then(function(response) {
                    console.log(response);
                })
                .catch(function(error) {
                    console.log(error);
                });
    
    现在设置跨域代理
    分析：
    /api 代替了 http://172.16.10.21:8001 
    /api/xs/setName 表示： http://172.16.10.21:8001/xs/setName
    
     axios.get('/api/xs/setName')
                .then(function(response) {
                    console.log(response);
                })
                .catch(function(error) {
                    console.log(error);
                });

vue.config.js

// 代理服务
        devServer: {
            port: 8080, // 端口号
            host: 'localhost',
            open: true, //配置自动启动浏览器
            proxy: {
                '/api': {
                    target: 'http://172.16.10.21:8001',//接口的域名
                    changeOrigin: true,//运行跨域
                    ws: true,
                    pathRewrite: { 
                        "^/api": ""
                    }
                }
            }
        },

**总结：**

webpack proxy做代理，是相当于找了个中间对象，第三者做host这块转发，也是nodejs做服务代理，还是为了服务端做处理。  
Java是直接给你跨域的权限，相当于http协议层面，允许你跨域，浏览器不做拦截。  
proxy基于本地服务做的跨域，打包成静态资源后，就没有nodejs服务了。所以如果上线了，proxy代理就没啥用了，

如打包成静态资源放在跟后端是同一个服务器的话，那就没有跨域的问题，如没有在一起的话，那后端要必须要设置允许跨域。

# 六.材料 #

[跨域资源共享 CORS 详解][CORS]，

[前端和后端解决跨域问题][Link 1]

[vue中proxyTable反向代理进行跨域][vue_proxyTable]

[Webpack Proxy工作原理（本地跨域）][Webpack Proxy]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/d57be8619a7248a58a7e4ac7df0638c0.png
[http_www.hzau.edu.cn]: http://www.hzau.edu.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/7828dc328c9946d39017e23b23ff64f0.png
[f63a693e51656306cbd9e1b692e858a2.webp]: /images/20210813/c7dcf9e25c984504bfebf6630983c871.png
[ccfab9fc93c2687a73796324eade8fe5.webp]: /images/20210813/1075bc5494ae4ae69f830c614806b1da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2]: /images/20210813/8af067fc8cf541a9824614a5d446e04e.png
[https_www.fujieace.com_html_cors.html]: https://www.fujieace.com/html/cors.html
[http_172.16.10.21_8001]: http://172.16.10.21:8001
[CORS]: https://link.jianshu.com?t=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2016%2F04%2Fcors.html
[Link 1]: https://blog.csdn.net/qlin_11/article/details/99302292
[vue_proxyTable]: https://blog.csdn.net/gao_xu_520/article/details/80407049
[Webpack Proxy]: https://www.jianshu.com/p/8fd5d7347c57