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

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

目录

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

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)
                }
            )
      },

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

1.1 跨域问题：

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

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

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

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

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

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

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之前的请求与响应

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

借助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有的

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

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

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

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

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

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

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

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')

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

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

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

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

怎么解决？

由代理服务器向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  
      }
标签 , ,

发表回复