Vue中利用代理服务器解决跨域问题

这篇具有很好参考价值的文章主要介绍了Vue中利用代理服务器解决跨域问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

第一章、了解跨域

第二章、解决跨域问题——代理服务器

2.1 了解原理

2.2 如何配置代理服务器

2.2.1 配置代理服务器(方法一)

2.2.2 配置代理服务器(方法二)


第一章、了解跨域

AJAX及其相关知识应用(很详细)_❆VE❆的博客-CSDN博客

第二章、解决跨域问题——代理服务器

2.1 了解原理

  • 前端的8080端口需要向后端服务器3000端口请求数据,此时前端8080端口号发送了请求,3000端口号响应了请求,返回了数据,由于浏览器的同源策略,该两端口号不同导致,8080端口接收不到数据。
  • 下就是一个代理服务器的图,在我们前端配置一个8080端口的代理服务器,当前端8080发送请求时,会向这个代理服务器发送,然代理服务器向后端3000端口的服务器发送请求,因为服务器与服务器之间没有跨域问题的,该3000端口服务器就会响应数据,之后返回代理服务器,代理服务器接收到数据之后再返回前端8080端口(此时协议、域名、端口号都一致,就不存在跨域的问题),从而跨域问题得到解决
  • 流程:8080端口下的网页发请求   ->   8080端口代理服务器接收代理到(解决跨域)   ->    3000端口服务器响应请求 ->8080端口代理服务器接收数据 -> 8080端口下的网页接收数据

vue代理跨域,Vue,vue.js,前端,javascript

2.2 如何配置代理服务器

利用vue-cil脚手架配置 ,有以下两种方法:

2.2.1 配置代理服务器(方法一)

  • 在vue的vue.config.js 中添加devServer配置项,如下:
module.exports = {
   devServer: {
        // 开启代理服务器,端口号写的是 需要发送给的 响应服务器
        proxy: 'http://localhost:3000'
    },
}

 -- 注意点:当我们添加devServer配置项时,服务器就会自动开启了对应8080端口号的代理服务器,此时我们配置的服务器是需要请求数据的服务器(地址)

-- 缺点:

        · 只能代理一个服务器

        · 如果 public 文件下有请求的数据的文件,那么代理就出问题了,会直接请求该文件,不会去代理3000端口下的服务器数据

  • 前端请求数据的方式:

vue代理跨域,Vue,vue.js,前端,javascript

 这里需要引入axios:

        · 我们使用axios库,下载该库打开vscode终端  :  npm i axios 

        · 然后把引入这个axios到我们的vue文件里面使用  : import axios from "axios";

注意:axios.get('请求路径'),做的代理服务器会去找3000端口(该端口下有students地址/数据)下students的数据,但是当请求的网页本身有students地址时(也就是public 文件下有students文件),会优先请求该文件夹里的数据,从而请求数据出现问题

2.2.2 配置代理服务器(方法二)

  • 在vue的vue.config.js 中添加devServer配置项,如下:
devServer: {
        proxy: {
            '/api': {//'/api'请求前缀
                target: 'http://localhost:3000',
                pathRewrite: { '^/api': '' }, // *匹配 /api 改为空,然后代理服务器会直接去 3000/students 请求
                // *下面不写,都是默认为true
                // ws: true, // 用于支持websocket
                // changeOrigin: true // 用于控制请求头中的host值
            },
            '/demo': {
                target: 'http://localhost:3001',
                pathRewrite: { '^/demo': '' },
                // ws: true, //用于支持websocket
                // changeOrigin: true //用于控制请求头中的host值
            }
        }
    }
}

 -- 参数:

        · target:配置响应的路径地址

        · pathRewrite:重写路径,匹配 /api 改为空,

        · ws:是否支持websocket

        · changeOrigin:控制请求头中的host值,是否欺骗配置的响应数据路径端口,true可理解为欺骗,说服服务器来源的端口也时3000端口,false就实话实说,是8080端口

 -- 优点:

        ·可以代理多个服务

        · 可以控制是否走代理 (如果走代理需要加 '/api')

        不加下面 pathRewrite ,代理服务器会直接去 3000/api/students 请求,而不是3000/students

  • 前端请求数据的方式:

vue代理跨域,Vue,vue.js,前端,javascript

 文章来源地址https://www.toymoban.com/news/detail-768768.html

到了这里,关于Vue中利用代理服务器解决跨域问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python实现跨域代理服务器

    准备环境 python3.7+ 依赖:aiohttp 代码实现(代理服务器,返回响应体和进行跨域处理后的headers) 测试 写个get的方法 下载测试 结果 可以正常下载 并且在响应头中能看到Server:is my server 同时可以看到添加成功的Allow-Origin响应头

    2024年02月16日
    浏览(46)
  • “代理服务器出现问题,或者地址有误”解决方案

    网上查了很多方法,终于解决了,在此分享一下(前两个方法为通用方法, 都不行的话,可以试试第三种方法) 方法一 :(windows11版) 打开设置——网络和Internet——找到代理  进入后可能是手动设置代理开启了,关闭即可 方法二 :(通用版) 打开控制面板——找到网络

    2024年02月03日
    浏览(61)
  • 代理服务器可能有问题,或地址不正确(已解决)

      如果遇到电脑连上wifi,其他应用可以上网(例如可以登录QQ),但是浏览器不能浏览网页,出现 代理服务器可能有问题,或地址不正确 这个错误,具体如下图所示。   首先右击电脑wifi标志,点击 打开网络和Internet设置 ,点击 代理 ,将 自动设置代理 的 自动检测设置

    2024年02月12日
    浏览(50)
  • windows“你尚未连接代理服务器可能有问题”解决方法

    打开控制面板的方法: 1.从任务栏搜索 单击Windows 10任务栏上的搜索按钮。 在搜索框中输入“控制面板”,然后单击顶部的搜索结果。 2.从运行对话框中打开控制面板 按Windows + R快捷键。 在输入框中输入“控制面板”(你也可以只输入control)。 按“确定”按钮。 3.用在命令

    2024年02月04日
    浏览(51)
  • vue2 vue3 配置代理 服务器返回404- 500的解决思路

    一、服务器返回500拒绝请求 1,服务器的服务没有起来 2,vue本地的代理地址填写错误,可能代理到别家的服务器了 正确的写法如下:(主要体现在ip地址和端口是否错误,当然也需要检查是否多了字母及符号。) http://112.59.21.18:8080 二、如果返回500,未找到页面404,说明是接口

    2024年02月16日
    浏览(59)
  • 前端开发服务器中的 Proxy 代理跨域实现原理解读

    各位朋友你们好,我是 桃小瑞 ,微信公众 @ 桃小瑞 。在这给大家拜个晚年,祝各位朋友新年快乐。 在前端的开发过程中,尤其是在浏览器环境下,跨域是个绕不开的话题,相信每个前端都会涉及到这个问题,记住的就直接手敲解决跨域问题,记不住的就只能问度娘了。😂😂

    2024年01月16日
    浏览(59)
  • 网络直连正常但浏览器显示代理服务器可能有问题的全部解决方法

    学校校园网是通过闪讯来接入的,今天下午网络一切正常,结果晚上回来立马寄,显示 尚未连接 代理服务器可能有问题,或地址不正确   结论: 如果你使用的为闪讯出现上述情况并且去搜索了解决方案一一尝试后都无果的话,请直接跳转到方法四,前三个方法为通用方法。

    2024年02月12日
    浏览(60)
  • Vue-配置代理(解决跨域问题)

    现在解决跨域主要有两种方式是CORS和Jsonp,但是在开发中用的比较多的是配置一个代理服务器。   上面那个图,左边是客户端所处位置,中间是代理服务器,要注意,红色框是客户所处位置,右边蓝色框是5000服务器,中间的粉色框因为是服务器和蓝色框服务器 之间进行数据

    2024年02月05日
    浏览(47)
  • vue项目跨域问题(图片跨域)devServer.proxy代理失效时,nginx反向代理解决跨域问题

    ​ 本篇文章主要记录个人在公司项目开发中所遇问题,主要内容:在vue项目的开发中图片所存的服务器/端口号和项目所在的服务器/端口号不同,出现了跨域问题的保错。 ​ 如果文章有歧义,请各位大佬指出,避免误导更多的人!! Bug起因 ​ 在vue项目的开发中图片所存的

    2024年02月15日
    浏览(46)
  • 利用Apache实现正向代理,使内网服务器可以访问外网

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 正向代理和反向代理的定义可以自己查询资料,通常用的较多的场景使用Nginx作为反向代理服务器,Nginx做正向代理服务器时仅可以访问HTTP网站,不能访问HTTPS网站,用处不大。 本文所需要的准备,一台

    2024年01月20日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包