Vue 2.x 的跨域配置

最新推荐文章于 2024-06-04 15:02:46 发布
最新推荐文章于 2024-06-04 15:02:46 发布
阅读量1.5k 收藏 1
点赞数 2
分类专栏： 前端技术 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eazon_chan/article/details/115087573
版权
在Vue 2.x开发中，遇到本地调用远程接口因跨域导致失败的问题。解决方法是在vue.config.js文件中添加代理配置。虽然完整的配置文件内容未给出，但重点在于理解如何设置代理以解决跨域限制。
摘要由CSDN通过智能技术生成

最近才开始学Vue，遇到了一个老生常谈的问题。
我在本地开发时需要调用服务器上部署的接口服务，因为跨域所以访问失败了。
那在Vue 2.x中该如何配置呢？
（因为还不清楚2.x与3.x是否相同，故这边写明了是2.x）

其实只需要在vue.config.js配置文件中增加一条代理的配置

module.exports = {
   
	// 省略其他配置
    devServer: {
   
        proxy: {
   
            '/api': {
   
                target: 'http://kareza.com/another-api',
最低0.47元/天 解锁文章
Kareza
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue（2.x，3.0）配置跨域代理
10-15
主要介绍了vue（2.x，3.0）配置跨域代理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue2中的跨域配置
weixin_61431071的博客
07-05 2733
在前后端的开发中总是难免会遇到前后端的跨域问题，比如当前后端的端口不一致时就无法对后段的数据进行访问，跨域问题说白了其实就是让前后端的数据能够通过不同的接口相互访问，当后端部署到云服务器时前端就必须要使用跨域配置来访问服务器的接口。其原理其实很简单，就是访问浏览器中的session，对session进行查询，如果有用户的登录信息就不进行拦截，如果没有就强制跳转到登录页面。跨域配置的主要文件在vue的util目录下的request文件和，src根目录的vue.config文件夹进行设置。
在Vue2中怎么解决跨域
热门推荐
weixin_58102387的博客
12-30 1万+
Vue中怎么解决跨域问题 这就是需要用跨域来请求数据的报错 第一步：在vue项目中的跟目录下创建一个 vue.config.js ，文件名是固定的，不一样就会报错 第二步: 在vue.config.js里边直接复制下面这串代码即可 devServer: { host:'0.0.0.0', //可以忽略不写 port: 8080,//它是用来修改你打开后的端口号的 open: true,//值为 true的话，项目启动时自动打开到浏览器里边， fal
vue2,vue3跨域配置proxy代理，以及pathRewrite的一些问题，及获取真实请求地址
qq_44766357的博客
06-04 1629
请求接口为：http://api.zhuishushenqi.com/cats/lv2/statistics。
Vue2怎么解决跨域问题
qq_57423665的博客
10-28 7232
vue2实现跨域请求该怎么做，axios请求跨域怎么办？解决跨域
Vue2解决跨域的3种方式
Mjjie_的博客
03-27 5756
1、什么是同源请求，什么是跨域请求？ 客户端和服务器进行数据交互请求时，请求协议、请求的url地址、请求的端口，这三项设定如果都相同称为同源请求，这三项设定如果有一项不同称为跨域请求。 2、相对路径都是同源请求，可以获取响应体数据。 3、服务器为了保护数据安全，只允许同源请求获取响应体数据，如果是跨域请求，不能正确的获取响应体数据，会有跨域访问报错。
vue2处理跨域问题
cai5的专栏
03-29 1628
vue中访问springboot中的RestController中的服务遇到的跨域问题
Vue 3.x+axios跨域方案的踩坑指南
10-16
主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue 3.x具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vue-devtools 大揭秘：Vue3.X 和 Vue2.X 调试工具安装及使用指南
最新发布
06-19
Vue.js 是一个流行的前端框架，分为 Vue2.X 和 Vue3.X 两个主要版本，Vue-devtools 支持这两个版本，帮助开发者在开发过程中更好地理解组件的状态、数据流以及应用的生命周期。 首先，Vue-devtools 的安装分为手动...
Vue-cli3.x + axios 跨域方案踩坑指北
10-16
Vue-cli 3.x 提供了一个解决方案，即使用 `axios` 进行数据请求，并通过 `devServer.proxy` 配置来代理请求，从而在开发阶段实现跨域。 `axios` 是一个基于 promise 的 HTTP 库，可以在浏览器和 Node.js 中使用。在...
vue2的vue.config.js中简单配置代理跨域
a99101的博客
02-02 6998
个人简单配置proxy代理跨域
Vuecli2跨域问题解决：Access to XMLHttpRequest at‘httplocalhost
qq_63524016的博客
04-15 1952
我在写实验室项目的时候，后端给我提供的接口并没有挂载到服务器上，他用的是8001端口，但是我vue项目设置的端口是8081这也就出现了跨域问题。
vue2和vue3解决跨域问题
weixin_44784401的博客
10-30 1421
vue2解决跨域和vue3之proxy代理的使用
VUE2：关于axios的跨域问题（No ‘Access-Control-Allow-Origin‘ ）以及解决方案（亲测有用，全流程配图文版，建议收藏）
jialuosi的博客
10-07 9833
其原理大致就是我刚刚添加了Axios.defaults.baseURL = '/api'，其每次发送请求都会加一个/api的前缀，这里拦截器拦截api前缀后将其替换为 target。今天在开发中新写了一个前端的项目作为集成，公司是保密项目所以公司代码肯定是不能粘贴了，回家之后还是觉得记录一下比较好，所以自己模拟了一个来给大家解决一下。接下来再看vue.config.js文件，没有就自己创建一个，但是一般都会有，名字不能错。
理解vue2脚手架“配置代理服务器”（附加：解决跨域）
m0_70190404的博客
08-05 1281
理解vue2脚手架“配置代理服务器”； 解决跨域；
vue2 跨域配置 （ v3暂时还没接触到项目）
qq_44766377的博客
07-04 1465
vue2跨域配置
vue2跨域问题解决[前端方法]
qq_44886882的博客
06-06 2066
vue2项目针对这种跨域的报错，使用前端的处理方法。
vue 2.x 版本 vue.config.js 配置跨域踩坑！！！
qq_36953218的博客
09-15 596
之前的 vue.config.js 配置失效，需要换个地方配置
Vue2项目中跨域请求，使用Axios请求（请求前的配置）
weixin_43488503的博客
10-08 2800
Vue2项目中跨域请求，使用Axios请求，讲述请求前的相关配置
vue confing.vue 跨域
09-07
Vue中可以通过配置vue.config.js文件来实现跨域请求。以下是一个示例的vue.config.js文件： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 要请求的后端接口地址 ws: true, changeOrigin: true } } } } ``` 以上代码表示将所有以`/api`开头的请求代理到`http://example.com`这个后端接口地址，并开启WebSocket支持，`changeOrigin`参数用于控制请求头中的host字段。 使用vue-cli 3.x创建的项目可以直接在根目录下找到vue.config.js文件，如果没有则需要手动创建。配置完成后，重启开发服务器，即可实现跨域请求。 在开发阶段，如果有需要跨域请求的接口，只需使用`/api`作为接口的路径前缀即可。例如，假设后端接口地址为`http://example.com/user`，则在前端代码中可直接使用`/api/user`来请求该接口。 在生产环境中，可以通过代理服务器如Nginx来配置跨域请求。将前端静态文件和后端接口放在同一个域名下，可以避免跨域问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kareza

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值