Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource

青旅半醒 2024-04-03 10:16 5阅读 0赞

**概论：**

![342f6dc07ecb4d1d997c8c1766eaa602.png][]

![0fa56a831b19423d81cd5da767060820.png][]

**目录**

一、跨域问题是怎么产生的

1.1 跨域问题：

1.2 解决办法

三、开启代理服务器

第一种方式：（存在弊端）

细节问题：（解释两个弊端）

第二种方式：（重要）

配置多个代理

--------------------

## **一、跨域问题是怎么产生的** ##

**违背同源策略**。协议，域名（主机名），端口有一个不同就是跨域。

比如在我的电脑上，我使用localhost：8080端口请求localhost：5000端口获取数据，这样的话就会出现跨域问题，如下图所示：这种情况是端口号不同

getStudents(){
            axios.get('http://localhost:5000/students')
               .then(
                    response=>{
                      // response是响应对象 response.data才是服务器给我们的东西 ！！！ 很重要
                      console.log('请求成功了',response.data)
                    },
                    error =>{
                      // 这个地方输出error也可以   error.message是具体的原因
                      console.log('请求失败了了',error.message)
                    }
                )
          },

![882a9d547457496f933e6fb06c8824a2.png][]

### **1.1 跨域问题：** ###

**把下面的8080端口想象成我们的前端工作人员**

如上图所示 在8080端口向5000端口（服务器）发送请求且已经送到了5000端口（服务器），5000端口（服务器）收到请求后也把8080端口想要的数据交给他，但是浏览器并没有进一步的展示出来，因为浏览器发现跨域了，数据就被浏览器拿在手里不进行展示了。

请求是可以发过去的！！！！！一定要注意！服务器也受到请求并且返回数据了！！！！只是浏览器发现是跨域，将请求来的时候握在手里不展示！！

那怎么证明服务器收到请求并且响应了？

如下图所示，当我们请求5000端口的时候，服务器是有响应的

![64a7302f0886481aaafd3bc9cd0b27d9.png][]

### **1.2 解决办法** ###

解决跨域：

1.代理服务器 （用的比较多）

2.JSONP

借助Script标签的src属性，在引入外部资源的时候不受同源策略限制做到的，真正开发用的很少，因为这个地方得前后端人员一起使用，只能解决get请求的跨域问题，很鸡肋但是很巧妙

3.让后端改cors,携带特殊响应头（真正意义解决跨域）

但是真实的开发中，响应头不是随便配置的，配置了的结果就是任何人都能找你要数据

**下面我们就来介绍一下第一种方法：使用代理服务器解决跨域问题**

那我们怎么理解代理服务器（粉色）呢？

房主中介的作用，左手顾客，右手房东

类似中间人，本身也是服务器。8080是我们目前所处在的位置（红色），代理服务器和我们处在的位置一个样，也是8080，始终保持一致

当我们在8080（红色）端口向5000端口索要数据的时候，并不会直接发送给5000端口（服务器），而是先发送给代理服务器（粉色8080），然后粉色的代理服务器反手把这次请求发送给了5000；之后5000端口收到代理服务器的请求之后把数据响应给了粉色代理服务器，然后粉色代理服务器又给了红色8080端口，最后红色的8080端口（服务器）接收到响应回来的数据。

但是有同学会想:那粉色代理服务器8080向5000端口（服务器）发送请求，那不是也跨域么？

粉色的是代理服务器，蓝色的5000也是服务器，服务器和服务器之前不用ajax打交道用的是http，所以同源策略根本管不到代理服务器与5000之前的请求与响应

![37a9c33fc1a2495a9b1ddd5e08abd215.png][]

**借助vue-cli开启代理服务器**

我们也可以使用Nginx开启代理服务器，但是是在后端也比较麻烦，在这里我们就是用Vue脚手架开启代理服务器即可，比较方便好用，也特别简单

一定要记得代理服务器的端口号要和我们保持一致！！！比如说，我们如果向localhost：5000要数据，那我们就不要写5000了，而是要写localhost：8080，因为我们开启了代理服务器，要和我们保持一致

## **三、开启代理服务器** ##

我们在哪个地方开启代理服务器呢？

vue.config.js文件

### **第一种方式：（存在弊端）** ###

注意！在proxy中不要写具体的路径，写到端口号即可，不用写后面的/students！！！！

这样写之后一个粉色的代理服务器就开启了，但是我们在使用之前，记得把脚手架给重启，因为我们修改了配置

// 开启代理服务器
      devServer:{
        proxy:'http://localhost:5000'
      }

下面的端口号也要改，我们最开始的时候是向5000索要数据，存在跨域问题，现在我们开启了一个粉色的代理服务器，而且代理服务器的端口和我们一致，所以我们写8080就好了

getStudents(){
            axios.get('http://localhost:8080/students')
               .then(
                    response=>{
                      // response是响应对象 response.data才是服务器给我们的东西 ！！！ 很重要
                      console.log('请求成功了',response.data)
                    },
                    error =>{
                      // 这个地方输出error也可以   error.message是具体的原因
                      console.log('请求失败了了',error.message)
                    }
                )
          },

#### **细节问题：（解释两个弊端）** ####

**1.不能灵活的控制能不能走代理**

代理服务器8080并不是把所有的请求都转发给5000，当请求的资源8080就有，这个时候就不会把请求转发给5000（人之常情，很好理解）

这个public文件夹就相当于我们服务器的根路径，public中有的就相当于我们现在8080有的

![a16499300cc5414f8cc39adf2915d91a.png][]

比如说我们在这个文件夹下新建一个text.txt文件

![d4053ff5a3bc48afba47227a89d81637.png][]

然后我们就在浏览器中进行访问，很顺利的拿到了数据

![1663bf415e574659917058c65e9c4372.png][]

接下来我们在public中创建一个同名文件

![dd87952f75204489a1eb10e6506b8804.png][]

![4741315bb179422c8b4a06215ed391ec.png][]

然后再发起请求，我们发现我们所要的请求数据变了，不是刚刚的我们从5000中获得的数据，而是实实在在public文件夹下students文件中的数据

![7e46c249be7a475ca1bdbdea835e00b8.png][]

**2.第二个弊端就是只能配置一个代理**

### **第二种方式：（重要）** ###

**'/api':**在我们第一种方式的时候存在一个弊端，就是我们不能灵活的操控时候走代理，但是在我们第二种方式中就可以，在我们下段代码中我们发现有'/api'，他的作用就是灵活的控制是否走代理

当我们的8080端口发送请求的时候，代理服务器就会问：本次请求的前缀是/api么？ 如果是的话就转发到5000，不是的话就不走代理（**也可以把api改成别的名字,比如可以改成atguigu**）

**target**的作用就是写我们真实的请求地址

**ws**是用于支持websocket，客户端和服务器的一种通信方式

**changeOrigin**：

**true：**不会如实回答自己的端口号是8080 假设对面是5000 我们请求之后这个代理服务器告诉他我也是5000 但是其实并不是**（骗人）**

**false**:会如实回答自己的端口号8080， 不会欺骗5000说自己是5000端口**（诚实）**

这个地方是**true撒谎好，以防5000端口号做限制不让别的端口访问**

devServer:{
        proxy:{
          // '/api'是请求前缀
          '/api':{
            target:'http://localhost:5000',
            ws:true,
            changeOrigin:true
          }
        }
       }

那么我们axios发起请求的路径也应该有所改变 ，一定是在端口号后面添加

**加前缀就走代理，不加前缀就不走代理**

axios.get('http://localhost:8080/atguigu/students')

当我们发起请求后又出现了下面的错误：

![3665dca19d3348afa7ac5cf3a62c6f93.png][]

原因：8080向代理服务器索要数据时带着atguigu，进而代理服务器向5000索要数据的时候也带着atguigu，这样就导致了上图中的404（5000中没有atguigu这个路径）

![2b6da38f83024744b4c2dbe4cabc08fd.png][]

**怎么解决？**

由代理服务器向5000发送请求时不应该再带着atguigu

添加： pathRewrite:\{'^/atguigu':''\}, 其中pathRewrite中是用键值对的方式存在的，左侧是正则的匹配条件（匹配所有的atguigu），右边是匹配完了之后编程右边的空白字符串就可以了（ 将atguigu字符串转化成空白字符串）

devServer:{
        proxy:{
          // '/api'是请求前缀
          '/atguigu':{
            target:'http://localhost:5000',
            pathRewrite:{'^/atguigu':''},
             ws:true,
             changeOrigin:true
          }
        }
       }

### 配置多个代理 ###

'/atguigu':{
            target:'http://localhost:5000',
            pathRewrite:{'^/atguigu':''},
             ws:true,
             changeOrigin:true
          },
          '/demo':{
            target:'http://localhost:5001',
            pathRewrite:{'^/demo':''},
            ws:true,
            changeOrigin:true  
          }

[342f6dc07ecb4d1d997c8c1766eaa602.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/300be48412be437ab87d9b4149770485.png
[0fa56a831b19423d81cd5da767060820.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5dbf403742a54f758edba72c2aa3b863.png
[882a9d547457496f933e6fb06c8824a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/00d763150b3842a78219527e001a8f2f.png
[64a7302f0886481aaafd3bc9cd0b27d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9fbffaece2a448cbbc00775b801ab6fa.png
[37a9c33fc1a2495a9b1ddd5e08abd215.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f27cafcae59c4cd19ff2d828c680260a.png
[a16499300cc5414f8cc39adf2915d91a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/079d3d027a474dbb96a304dd01363602.png
[d4053ff5a3bc48afba47227a89d81637.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/07f5df0bf6574075b60befc9a84f6386.png
[1663bf415e574659917058c65e9c4372.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c41ecf5fe286432e9b92550bd2c3df7a.png
[dd87952f75204489a1eb10e6506b8804.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8cbaa87c61204b45894387fe7709cc03.png
[4741315bb179422c8b4a06215ed391ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3ab028b05d0f4b58af63b83e5b384a5a.png
[7e46c249be7a475ca1bdbdea835e00b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c4b3da9986bb4f31b9b29128f35c8119.png
[3665dca19d3348afa7ac5cf3a62c6f93.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ebe6f058923440d3a95258e08ee0d6f2.png
[2b6da38f83024744b4c2dbe4cabc08fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a230c716ee3a42d08276dd04af515d45.png

Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource

相关快速解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方案

相关 Post request is No 'Access-Control-Allow-Origin' header is present on the requested resource跨域问题解决

相关完美解决Springboot跨域（No 'Access-Control-Allow-Origin' header is present on the requested resource）

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource'，跨域访问的解决方法

相关跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource

相关解决ajax中No ‘Access-Control-Allow-Origin‘ header is present on the requested resource跨域问题

相关报错：跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

相关 ajax 跨域访问 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource