经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue使用反向代理解决跨域问题方案
来源:jb51  时间:2023/1/11 8:38:29  对本文有异议

为什么要解决跨域问题

因为浏览器有限制,只有同域名同端口号下的数据才能拿来用;

那如果想拿到不同域名不同端口号下的数据就不行了;

在单文件组件中如何去解决跨域问题

因为服务器没有跨域限制,只有浏览器有跨域限制,所以我们可以通过我们自己的服务器去拿回后端服务器接口的数据,再传给前端; 我们自己的服务器是:启动单文件组件项目会启动一台8080端口号的服务器;

解决跨域问题需要配置反向代理代码; 如何配置反向代理代码:

用axios向后端数据接口发起请求,拿回数据:

在App.vue中引入axios模块,没下载的先下载: 下载:

npm i --save axios 引入 axios模块:

import axios from 'axios' 发axios请求:

后端数据接口:猫眼验证中心

  1. mounted () {
  2. axios.get('/api/mmdb/movie/v3/list/hot.json?ct=%E6%89%AC%E5%B7%9E&ci=120&channelId=4')
  3. .then(res => {
  4. console.log(res.data.hot)
  5. })

配置反向代理

在项目文件夹下新建一个 vue.config.js 的文件,然后写上下面这段代码(可参照下面的配置模板文件):

  1. module.exports = {
  2. //配置反向代理
  3. port: 8080,
  4. host: 'localhost', // ip 本地
  5. open: true,
  6. proxy: {
  7. "/api": {
  8. target: `http://10.43.8.102:55555/`,
  9. changeOrigin: true,
  10. ws: true, // 是否代理websockets
  11. pathRewrite: {
  12. "/api": ""
  13. }
  14. }
  15. }
  16. }

注意: 写好配置代码以后,要重新运行项目,重启服务器;

配置模板文件及字段解释

  1. module.exports = {
  2. devServer: {
  3. port: 8080, // 设置端口号
  4. host: 'localhost', // ip 本地
  5. disableHostCheck: true, //是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查
  6. hotOnly: false, // 热更新
  7. https: false, // https:{type:Boolean}配置前缀
  8. open: false, //配置自动启动浏览器
  9. proxy: null, //设置代理
  10. proxy: { //目的是解决跨域,若测试环境不需要跨域,则不需要进行该配置
  11. '/api': { // 拦截以 /api 开头的url接口
  12. target: 'http://localhost:5140/api', //目标接口域名
  13. changeOrigin: true, //是否跨域
  14. ws: true, //如果要代理 websockets,配置这个参数
  15. secure: false, // 如果是https接口,需要配置这个参数
  16. // 标识替换
  17. // 原请求地址为 /api/getData 将'/api'替换''时,
  18. // 代理后的请求地址为: http://xxx.xxx.xxx/getData
  19. // 若替换为'/other',则代理后的请求地址为 http://xxx.xxx.xxx/other/getData
  20. pathRewrite: { // 标识替换
  21. '^/api': '' //重写接口 后台接口指向不统一 所以指向所有/
  22. }
  23. }
  24. }
  25. },
  26. }

整个配置反向代理的思路

我们要配置反向代理的原因是:因为跨域问题我们直接拿不到跟我们不同域名不同端口号下的数据,这是浏览器的跨域限制,我们不能在浏览器上显示后端的数据,但是服务器端没有跨域限制,所以可以让我们自己的服务器(项目运行,会启动一台服务器),去请求后端服务器,拿到数据,然后再传给我们前端。 如何拿呢:按照上面的代码进行配置,axios.get后面的请求地址,原本是:第一张图这样子,

但是我们把前面域名给去掉,往下面这个接口发请求:

反向代理服务器的应用:往这个接口发请求,被拦截到了,凡是往这个接口发请求的,反向代理服务器,会在前面加上target域名 ,往真实的地址去请求。

配置信息:

只要是前端往‘/api’这个接口发请求的,前面都加上target里的这个域名,此时我们自己的服务器就知道最后是往这个地址请求数据:

解决接口重复问题

有时候会发现同一个接口的域名可能不一样,我们只需要拿指定域名的数据,比如说“/api”这个接口名字一样,但是这个接口前面的域名不一样,也就是两个不一样的地址,刚好就“api”这个名字重复了,如果还像上面那样配置的话,它就把所有“api”接口的地址前面全加上了一个域名。

解决办法:我们可以在加一个自定义接口,格式:“/名称”,例如:前面加个“/yiyi”:

然后在配置文件中加一个属性:pathRewrite

  1. devServer: {
  2. proxy: {
  3. '/yiyi': {
  4. target: 'https://i.maoyan.com',
  5. changeOrigin: true,
  6. //路径重写
  7. pathRewrite: {
  8. '^/yiyi': ''
  9. }
  10. }
  11. }
  12. }

把“/api”改成“/yiyi”,然后加上一个pathRewrite属性,含义是路径重写,把自定义这个接口换成空,意思就是先按照“yiyi”这个名称去选出App.vue里“/yiyi”的接口,选出来后再把加的yiyi接口赋值为空,这样就可以避免和其他“api”接口的路径数据搞混了,最终拿到的数据接口还是:

以上就是vue使用反向代理解决跨域问题方案的详细内容,更多关于vue反向代理解决跨域问题的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号