服务器代理相关&如何解决跨域

请求方式

1、【xhr】 new XMLHttpRequest() xhr.open() xhr.send  （过于繁琐）
2、jQuery $.get $.post  （与Vue react不操作dom的开发思想相悖）
3、fetch （不支持ie）
4、axios  （推荐使用）

视频详解

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=96

什么是跨域

当协议名、主机名、端口号不一致时，即为不同源。
当三者相同时（即同源时），方可进行通信。
跨域可理解为违背了同源策略

注解：
http://localhost:8080
其中
http  是  协议名
localhost  是  主机名
8080  是  端口号

解决跨域的方式

1、前端无需改动，由后端通过cors解决跨域（标准方式）

【实现思路】：网址请求服务器时，虽然不同源。但服务器返回数据时，会携带一些特殊的响应头，这些响应头相当于钥匙，可使浏览器放行，从而拿到服务器返回的数据。

【通信单位】：【浏览器】<-->【服务器】

举例浏览器网址：http://localhost:8080
举例服务器：http://localhost:5000

2、jsonp方式（基本不用）

【实现思路】：借用script的src引入外部资源的时候，不受同源策略限制的特点。达到获取服务器数据的目的。

【通信单位】：【浏览器】<-->【服务器】

【缺点】：只能使用get。如post、delete等请求方式都不能用。故此方式基本不用，但面试可能会考

3、Nginx配置代理

【实现思路】：配置一个和浏览器同源的代理服务器，与浏览器进行通信。再通过此服务器与后端服务器进行通信，因为服务器之间没有同源策略的限制。

【相关配置】：
server{
    listen       80;
    server_name  localhost;

    # 【***前端网址代理***，若本机ip为164，则将http://127.0.0.1:8048地址代理为http://192.168.2.164/pup#/，需在hash路由下使用】
    location /pup {
        proxy_pass http://127.0.0.1:8048;
        #    proxy_pass http://localhost:8048;
    }

    # 【***后端服务器接口代理***，如本机ip为171，则将http://192.168.2.164:8001(这个地址是服务器那边给的)请求接口代理为http://192.168.2.171/apip（这个地址是前端自定义的）请求接口
     #有3处需要更改  location /apip    ---   rewrite ^/apip    ---   proxy_pass  http://192.168.2.164:8001】
    location /apip {
        rewrite  ^/apip/(.*)$ /$1 break;
        proxy_pass http://192.168.2.164:8001;
        index  index.html index.htm;
        ###nginx与上游服务器(真实访问的服务器)超时时间 后端服务器连接的超时时间_发起握手等候响应超时时间
        proxy_connect_timeout 10s;
        ###nginx发送给上游服务器(真实访问的服务器)超时时间
        proxy_send_timeout 10s;
        ### nginx接受上游服务器(真实访问的服务器)超时时间
        proxy_read_timeout 10s;
    }
}

【通信单位】：【浏览器】<--同源-->【代理服务器】<-->【服务器】
举例浏览器网址：http://localhost:8080
举例代理服务器：http://localhost:8080
举例服务器：http://localhost:5000

4、通过Vue-Cli配置代理

【实现思路】：配置一个和浏览器同源的代理服务器，与浏览器进行通信。再通过此服务器与后端服务器进行通信，因为服务器之间没有同源策略的限制。

【配置文档】：
https://cli.vuejs.org/zh/config/#devserver-proxy

https://github.com/chimurai/http-proxy-middleware#proxycontext-config

【相关配置】：
在vue项目的vue.config.js里配置
module.exports = {
    devServer: {
        proxy: {
            '/api': {  //配置接口后缀
                target: 'http://localhost:5000',  //配置服务器地址
                pathRewrite: {'^/api' : ''}  //匹配所有以/api为接口后缀的路径，将其替换为''，即 http://localhost:8080/api/videolist --> http://localhost:8080/videolist。此处为什么这么写？见下方
            },
            '/abc': {  //配置第二个代理
                target: 'http://localhost:5001',  
                pathRewrite: {'^/abc' : ''}
            }
        }
    }
}

【通信单位】：【浏览器】<--同源-->【代理服务器】<-->【服务器】
举例浏览器网址：http://localhost:8080
举例代理服务器：http://localhost:8080
举例服务器：http://localhost:5000

【为什么要配置一个接口后缀如/api】
相当于给接口加一个识别，代理服务器会先从vue项目的public文件夹里找，如果找到videolist文件，则中止请求，不再去后端服务器请求数据。
为防止此种情况，则加一个接口后缀如/api、/abc等都可以。
然后代理服务器识别完成后再将此后缀去掉再转达给后端服务器。

【关于上方pathRewrite的解释】
不配置pathRewrite：
浏览器将http://localhost:8080/api/videolist请求递交给代理服务器。代理服务器会将此请求原封不动转达给后端服务器。获取【/api/videolist】下的数据。

配置pathRewrite：
浏览器将http://localhost:8080/api/videolist请求递交给代理服务器。代理服务器会将此请求处理为http://localhost:8080/videolist后转达给后端服务器。获取【/videolist】下的数据。

实际上后端服务器的/api/videolist下无数据，/videolist下有数据，所以pathRewrite是必要的。