vue-cli配置跨域请求

2022-07-04 20:31:36 阅读：97 来源： 互联网

应用场景以及问题描述

有的时候我们在本地环境进行项目开发（http:///localhost:8080）时需要根据后端（http://localhost:8888/api）提供的接口获取数据，并渲染到页面上
因为浏览器的同源策略的限制问题（协议、主机、端口一致），浏览器访问非同源的网址时,会出现无法获取数据（已发请求，服务器已收到请求）,出现跨域问题

解决方案

方案一：cors跨域(配置服务器)

原理：全称 “跨域资源共享”，它允许浏览器向跨源服务器，发出XMLHttpRequest请求（配置响应头Accesse-Control-Allow-Origin:"*",违背任意一条同源策略都能访问响应数据），从而克服了AJAX只能同源使用的限制。
缺点：这样会造成任何人都能向这台服务器要数据。

方案二：jsonp跨域

原理：动态生成script标签，通过src引入接口地址(因为src不存在跨域的)；请求数据类型dataType为jsonp，缺陷只支持get请求，且存在一些安全隐患

方案三：代理服务器

原理：借助vue-cli脚手架开启代理服务器，再通过代理服务器去请求真正的后台服务器，最后本地服务器再将请求回来的数据返回给浏览器（本地服务器跟浏览器之间不存在跨域），利用了后台服务器之间请求不存在跨域的问题
步骤：
在vue-cli项目下看是否存在vue.config.js文件，如无则创建文件并新增如下配置

module.exports = {
  devServer: {
    proxy: {
      //灵活代理；请求前缀为/api时，走下面的代理
      '/api': {
        //代理服务器把请求转发给url(真正的后台服务器)
        target: 'url',
        // 是否启用websockets
        ws: true,
        //是否开启代理
        changeOrigin: true,
        //路径重写
        pathRewrite: {
          //匹配以api开头的路径替换成空字符串
           '^api': ''
         }
      },
     //配置多个代理；请求前缀为/demo时，走下面的代理
       '/demo': {
        target: 'url2',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
           '^demo': ''
         }
      },
    }
  }
}

代理服务器配置说明

target

devServer:{
  proxy:{
    '/api':{
      target: 'http://www.baidu.com'
    }
  }
}

上图表示当请求地址中包含"/api"时要转发到的服务器地址，比如当vue-cli的地址为：http://localhost:8080/api/test时，会去请求http://www.baidu.com/api/test

pathRewrite

devServer:{
  proxy:{
    '/api':{
      target: 'http://www.baidu.com',
      pathRewrite: {
        '^/api':''
      }
    }
  }
}

上面表示当请求地址中以"/api"开头的地址替换成空字符串，比如当vue-cli的地址为：http://localhost:8080/api/test时，会去请求http://www.baidu.com/test

标签：vue,http,请求,api,跨域,服务器,cli
来源： https://www.cnblogs.com/it774274680/p/16444317.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9