vue/cli3.0中前端解决跨域问题

最新推荐文章于 2024-07-01 18:30:59 发布
最新推荐文章于 2024-07-01 18:30:59 发布
阅读量632 收藏 4
点赞数 1
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44217360/article/details/102476409
版权

1.在 package.json 同级目录下新建vue.config.js 文件

2.在vue.config.js文件里添加如下代码

module.exports = {

    outputDir: 'dist',   //build输出目录

    assetsDir: 'assets', //静态资源目录（js, css, img）

    lintOnSave: false, //是否开启eslint

    devServer: {

        open: true, //是否自动弹出浏览器页面

        host: "localhost", 

        port: '8080',

        https: false,

        hotOnly: false, 

        proxy: {

            '/api': {

                target: 'http://192.168.16.158:8080', //API服务器的地址

                changeOrigin: true,

                pathRewrite: {

                    '^/api': ''

                }

            }

        }

    }

}

3.在发送请求时 把服务器的地址换成/api 例如：

this.$axios.get("/api/webcall/sms/send/validateCode", qs.stringify(params)).then(res => {})

 

 

 

weixin_44217360
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue纯前端实现跨域
weixin_45670469的博客
12-04 962
前端实现跨域的方式 更改浏览器设置实现跨域 –disable-web-security --user-data-dir=C:\MyChrome 在图片位置加入上面的代码即可,这种方式比较直接,不推荐; vuecli3.0实现跨域 搭建服务器 const express=require("express"); const app=express(); app.get("/api/aa",(req...
关于解决vue3的跨域问题
m0_74079165的博客
09-29 7837
1. 代理请求：使用Vue CLI提供的配置proxy代理功能，将跨域请求转发到后端API。3. JSONP请求：如果后端API支持JSONP，你可以使用Vue Resource或Axios等库发送JSONP请求。2. CORS头部设置：在后端API的响应中设置CORS头部，允许前端Vue应用的域名访问后端API。你可以根据自己的需求和后端API的要求选择适合的方法。这样，在你的Vue组件中，可以直接使用`/api`作为请求路径，而不需要担心跨域问题。这样，前端Vue应用就可以跨域访问后端API了。
VUE3解决跨域问题
最新发布
hzp666的博客
07-01 759
本文基于vue3 + vite + element-plus + pnpm报错：**** has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.原因：前端不能直接访问其他IP，需要用vite.config.ts 做个代理，拦截本地IP替换成外部IP解决方案：比如在页面中，我们要访问一个页面。
前端vue-cli3解决跨域的方案(配置proxy代理)
VACAN3的博客
06-23 4395
浏览器的跨域报错 vue-cli2和cli3解决跨域的方法是有区别的,在这个点上绕了不少弯,proxyTable/proxy 其实方法很简单,重点在手动创建的根目录里vue.config.js的proxy配置,vue.config.js里的配置项都是可选的,我们只需要配置自己需要的部分就可以。 1. 修改vue.config.js devServer: { open: true, //是否自动弹出浏览器页面 host: "localhost", port: '8080', proxy: {
vue3.0使用axios 解决跨域问题
x_h_j_的博客
03-08 3628
走了很多弯路，总结出来的，保姆级别教学直接带你使用，跟着我走，不会报错，如果不行，你来打我。在请求时，如果出现了以下情况中的任意一种，那么它就是跨域请求：跨域问题是指在浏览器环境下，当一个网页的脚本试图访问不同源（域名、协议或端口）的资源时，会发生跨域请求。这种问题主要是由于浏览器的同源策略导致的，该策略是为了防止恶意网站获取用户的敏感信息或进行攻击1。跨域问题出现的具体原因包括：1. 域名不同：浏览器会限制不同域名之间的资源访问。
关于Vue3前端本地跨域
Frank杰的博客
11-20 550
module.exports = { devServer: { host: "localhost", port: 8081, // 端口号 https: false, // https:{type:Boolean} // open: true, //配置自动启动浏览器 //配置跨域 proxy: { '/api': { // 要代理的地址
vue 实现cli3.0中使用proxy进行代理转发
10-16
总结来说，Vue CLI 3.0的`proxy`配置提供了一种简单的方法，帮助开发者在开发环境中绕过跨域限制，实现前端与后端API的本地联调。通过在`vue.config.js`中正确设置`proxy`，你可以将特定路径的请求转发到指定的...
vue-cli3.0配置demo更新
07-23
在 "vue-cli3.0配置demo更新" 中，我们将探讨 `vue.config.js` 文件的详细配置，以及如何配置别名、代理跨域和 devServer。 `vue.config.js` 是 Vue CLI 3.x 中的核心配置文件，允许开发者自定义项目的构建设置。在...
如何基于vue-cli3.0构建功能完善的移动端架子
10-17
在本文中，我们将详细介绍如何利用 Vue CLI 3.0 构建一个功能完善的移动端应用，涉及的主要知识点包括 Webpack 配置、CSS 处理、适配方案以及状态管理等。 1. **Webpack 打包扩展** Vue CLI 3.0 引入了重大改进，...
vue-socket.io跨域问题有效解决方法
10-15
在本文中，我们将详细讨论如何解决Vue-Socket.IO在跨域环境下的问题。 首先，让我们理解一下问题的背景。在开发环境中，Vue CLI提供了一个内置的热模块替换（HMR）服务器，该服务器默认不允许跨域请求。当你的Vue...
vue3.0 代理解决跨域
weixin_52164116的博客
06-17 379
vue3.0解决跨域，我按照下面这个博主方法解决的，很详细 Vue3.0中解决跨域代理问题_许魁的博客-CSDN博客_vue3.0跨域问题 我是封装的接口数据步骤多加一步，在.env.porduction生产环境页面配置 VUE_APP_TITLE=APP_DEVELOPMENT VUE_APP_GMTZAUTH_URL = '/api' //是vue.config.js的代理api ......
前端vue3解决跨域问题
热门推荐
m0_46261332的博客
11-24 1万+
前端vue3解决跨域问题 适用环境：vue3+axios 问题产生 简单来说，跨域产生的原因是浏览器请求到的前端网页与前端请求的网页不在同一个域或同一个端口 比如说我访问了百度www.baidu.com这个网页，百度这个网页加载到你的浏览器了，然后你点击了搜索按钮，网页请求www.souhu.com的资源。这个时候问题产生了，由于www.baidu.com与www.souhu.com不是同一个域，浏览器就报错“啊啊啊，你这不能访问啊，拒绝你！” 但是假设网页访问www.baidu.com/aaa.html又
vue2.0，3.0前端跨域解决方案
M_wisdom的博客
09-09 174
vue.2x vue3.x
vue3跨域请求及一些常用配置
weixin_42371812的博客
01-22 4384
3、上面两步都完成后，我们就可以正常来请求我们的接口了。当然，为了以后更方便的维护自己的代码，业内也一般会有一个规范（当然 ，也不是一定得这样）。在使用vue3开发的时候，总免不了做一些基础的配置。接下来，我就做一些自己在在开发中所运用到一些常用配置。其实，对于跨域配置，我之前的博文中也有说过，在这儿我也就大概再讲一次。目录（其实文件夹的名字可以随意，但为了规范【网上也是多是这样子的名字】），之后在该目录下新建一个。文件中配置，网上有说这个文件不能配置，经测试，也没啥毛病。，再在api目录下新建一个。
基于vue cli3.0开发中跨域配置问题
蜗牛快爬
05-27 661
最近项目开发中使用了开源的web-flash框架，整体不错，作者也很给力，前端采用vue cli3.0。 现在项目都采用前后端分离，所以跨域是我们开发中遇到的常见问题，当然如果熟悉nginx就无需关心这个问题，如果是其他服务宿主，可能需要考虑跨域的问题，比如我用的是IIS，必须解决跨域，在后台放开跨域请求的要求后，前端也需要做一下简单的处理。 如果不需要携带cookie，改为false,这个很重要。 ...
vue-cli 3.0 和axios 解决前端跨域请求
好人一生平安
06-21 950
配置文件在vue.config.js module.exports = { publicPath: ‘./’, productionSourceMap: false, devServer: { before(app) { app.get(’/api/region’, (req, res) => { res.json({ data: appData }) }) }, proxy: { ‘/te...
Vuecli脚手架/前端解决跨域/属性穿透/环境变量配置
你还有我
04-22 1873
这里写目录标题Vue.cli的安装和运行 安装一个插件,之前学js用到控制台 现在学vue用到这个插件好比学js时的控制台 谷歌极简插件下载vue.devtools 如果安装不能用看这个人的博客 https://blog.csdn.net/sunhl951/article/details/80185628 Vue.cli的安装和运行 cli命令行界面(Command Line Interface) npm install -g @vue/cli 检查版本号 vue -V 或vue --version
vue-cli3.0解决跨域问题（超简单）
qq_42515626的博客
02-05 2473
在根目录新建文件：vue.config.js 在文件新增内容： module.exports = { publicPath: '/', outputDir: 'dist', devServer: { open: true, host: 'localhost', port: '8081', proxy: {...
vue跨域配置
十一的博客
12-04 5735
1.项目根目录新建vue.config.js文件，把一下代码复制到vue.config.js中 module.exports = { lintOnSave: false, baseUrl: process.env.NODE_ENV === 'production' ? './' : '/', devServer: { prox...
vue/cli5.0跨域
09-06
在Vue/cli5.0中，要解决跨域问题可以通过以下几种方式： 1. 使用代理服务器：在vue.config.js中配置devServer.proxy，将请求转发到其他域名。例如，设置target为目标服务器地址，将请求发送到目标服务器，从而避免跨域问题。 2. JSONP跨域：如果目标服务器支持JSONP，可以使用JSONP来进行跨域请求。在Vue中可以使用axios库，并通过配置axios的jsonp参数来发送跨域请求。 3. CORS跨域：在后端服务器的响应中添加Access-Control-Allow-Origin等头信息，允许跨域请求。Vue中可以通过在服务器端设置响应头，或者在axios请求中添加选项来实现CORS跨域。 4. 使用Webpack的DevServer配置：在vue.config.js中通过配置devServer来实现跨域。设置proxy选项来指定要代理的路由，例如将/api路由指向目标服务器地址。 需要注意的是，以上方法都需要在开发环境下生效，生产环境可以通过配置Nginx或其他反向代理服务器来处理跨域问题。 以上是几种常见的解决Vue/cli5.0跨域问题的方式，具体选择哪种方式取决于你的项目需求和后端服务器的支持情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值