vue脚手架配置代理（解决跨域问题）

于 2024-08-16 11:03:15 发布
阅读量370 收藏 7
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldd_eb/article/details/141252399
版权

vue配置代理

一.介绍

跨域问题是指协议，主机，端口有一个以上不同
解决方法：
1，cors(最标准）
2，jsonp（script src）（比较巧妙）
3，代理服务器（最常用）
(1) nginx比较难需要对后端比较熟悉，一般用第二种
(2）vue-cli
在这里插入图片描述
流程：
端口为8080的主机要向端口为5000的主机发送请求
需要一个端口为8080的代理服务器（图上粉色）
8080的主机向8080的代理服务器发送请求（没有跨域问题）
端口为8080的代理服务器把请求发送给端口为5000的服务器（服务器与服务器打交道，不需要用axios）

接下来介绍vue-cli的两种用法

二.方法一

在这里插入图片描述
此时代理服务器的端口是8080，proxy中写代理服务器要发送请求的
服务器
在这里插入图片描述
get请求中写要请求的代理服务器及要向服务器请求的数据

1.若要向服务器请求的数据即students存在（即public目录下有）则不会向服务器发送请求，会优先匹配当前数据
2.这个方法只能有一个代理

三.方法二

在这里插入图片描述
前缀加在端口号后面
target中写代理服务器要发送请求的服务器
changeOrigin为true时撒谎，为false不撒谎，默认为true
在这里插入图片描述
若不写pathRewrite:{‘^/atguigu’:’ '}
请求的资源是atguigu/students

ldd_eb
关注
vue项目如何解决跨域问题
关注我！带你一路 "狂飙" 到底！
02-07 728
CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。● 主机相同（host）
vue脚手架解决跨域
wangqiao666888的博客
12-30 1329
1.什么是跨域 1.浏览器，端口，域名只要有一项不同就会产生跨域，协议域名端口都相同才同域，否则都是跨域 2.如何解决跨域 1.首先在vue脚手架的根目录下创建一个vue.config.vue文件 2.然后vue脚手架会自动进行webpack配置，而vue.config.js文件就是进行修改默认的该配置的 3.配置的思路 1.创建vue.config.js文件，里面的devServer是进行开发环境的服务器配置的，有proxy是用来进行代理的转发，在proxy里的target设置转发的网址 4.跨域转发
Vue脚手架解决跨域问题：
weixin_60697146的博客
02-04 617
Vue解决跨域问题
vue 脚手架跨域问题解决
跑路羊崽丶的博客
02-17 773
根目录下新建vue.config.js，源码： module.exports = { devServer: { proxy: { '/api': { target: 'https://sp.wjrdyf.com/',//服务器域名 changeOrigin: true, pathRewrite: { '^/api': ''
使用vue脚手架解决跨域问题
富在术数不在劳身,利在势局不在力耕。
01-07 852
先用nodejs创建两个服务器端口自己随便设置 // 服务器1 var http = require('http') // 创建一个web服务器 var server = http.createServer() // 接收到客户端发过来的请求 server.on('request',function(request,response){ reData = [ {'name':'刘德华','age':31,'gender':'男'}, {'name':'杨幂','age':27,'gende..
Vue开发中遇到的跨域问题及解决方法
10-15
- 使用vue-cli脚手架的代理配置： 如果是使用Vue CLI创建项目，它已经内置了代理功能，可以在项目的`vue.config.js`文件中进行配置。配置方法大致如下： ```javascript module.exports = { devServer: { proxy...
Vue-配置代理（解决跨域问题）
qq_43781887的博客
11-01 3648
上面那个图，左边是客户端所处位置，中间是代理服务器，要注意，红色框是客户所处位置，右边蓝色框是5000服务器，中间的粉色框因为是服务器和蓝色框服务器 之间进行数据请求阔以直接请求，因为不用ajax进行通信，直接http就阔以。2.不能灵活控制走不走代理，比如我public文件夹里面要是有student文件它就不会走代理而是直接把student文件给我们。现在解决跨域主要有两种方式是CORS和Jsonp，但是在开发中用的比较多的是配置一个代理服务器。1.只能配置一个代理服务器。（2）配置代理服务器方式二。
vue项目配置本地代理解决跨域问题
qq_45846691的博客
06-18 2931
vue项目配置本地代理解决跨域问题 原理：之所以出现跨域是因为浏览器为安全起见采取的同源策略的限制，即域名，协议，端口相同，所以我们在本地开发环境请求后台接口时浏览器会出现跨域的错误，配置本地代理是利用了服务器是不存在同源策略的限制这个原理来解决跨域问题的。当客户端发送请求时，请求本域服务器，再由本域服务器请求数据并响应返回给客户端。 vue-cli 2.x搭建的项目 在config 文件夹的index.js文件中找到开发环境dev里面的proxyTable 然后进行如下配置： module.expor
vue 3 在 vue.config.js配置代理 解决前端跨域问题
m0_46701899的博客
10-12 600
module.exports = { // 是否开启cssSourceMap productionSourceMap: true, //build输出目录 outputDir:"client_pc", //静态资源目录（js, css, img） assetsDir:"static", filenameHashing:false, // 设置打包文件路径 publicPath: process.env.NODE_ENV === 'pr...
Vue-cli 配置代理服务
li_aoqi的博客
10-27 2163
Vue-cli 配置代理服务 方法一： 在vue.config.js中添加如下配置： devServer:{ proxy: "http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二： 编写vue.config.js配置具体代理规则： module.exports = {
Vue脚手架及跨域解决
weixin_47424753的博客
07-25 223
Vue脚手架创建vue项目；跨域解决；
vue脚手架配置跨域代理
qq_45926448的博客
09-09 280
vue脚手架配置跨域代理
同源策略和跨域解决方案——JSONP、CORS、代理跨域（vue-cli脚手架搭建代理服务器）
m0_55734628的博客
08-29 2714
在简单请求中，只要满足简单请求的要求，一般情况下，是不怎么需要服务端去进行配置的，除了Access-Control-Allow-Origin这个字段是必备的OPTIONS请求作为预检请求，就算请求方法没有在Access-Control-Allow-Methods规定范围内也不会出现错误，但是我们不能自己发送OPTIONS请求CORS跨域设置涉及到后端和前端的配合。后端通过设置响应头来允许特定的跨域请求，而前端则需要确保请求头中包含适当的信息。这样可以保障安全地进行跨域资源访问参考文档：MDN。
vue脚手架跨域请求
weixin_44046781的博客
06-16 273
根目录下新建vue.config.js 脚手架会根据文件名自动匹配 module.exports = { //runtimeCompiler: true, //publicPath: '/', // 设置打包文件相对路径 devServer: { // open: process.platform === 'darwin', // host: 'localhost', //去除eslint overlay: {
vue框架下解决跨域问题
weixin_48123820的博客
04-24 166
的概念：同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，vue框架下的解决办法：去vue.config.js文件中写代理跨域，解决跨域问题。概念：浏览器向服务器发送请求，出现协议、域名和端口号不同的情况，称为跨域；情景：本地服务器向公共的开发服务器发送请求的时候，会出现跨域问题；
vue cil 脚手架 实现跨域
wenfu814的博客
09-08 254
请求聚合免费天气接口的时候 请求的时候说跨域 可以使用vue proxy 代理 1.新建一个vue.config.js module.exports = { lintOnSave: false, devServer:{ open:true, proxy: { //配置跨域 '/api': { target: 'http://v.juhe.cn/weather/index', //这里后台的地址模拟的;应
axios的基本使用和vue脚手架自带的跨域问题解决
最新发布
weixin_55797790的博客
06-24 719
1.1 导入axios 1.2 创建serve1.jsserve1.js App.vue 1.3 执行node命令，打开服务监听 1.4 启动vue项目 结果：关于跨域问题的具体说明和其他解决方案见：什么是跨域？跨域解决方法-CSDN博客想通过vue脚手架自带的跨域解决，需要在 vue.config.js 中配置 devServer2.1 基本配置 此时，需要重新运行vue项目 就能在控制台上看到请求的结果了，结果： 2.2 详细配置详细配置可以精准控制自己本次请求需不需要代理转发vue.config.j
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值