前后端的独立部署，修改vue支持ip、localhost访问，ip、localhost访问前端页面，只有ip访问方式后端@CookieValue可以获得cookie值

原创 已于 2022-05-07 11:29:16 修改 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript

于 2022-05-07 11:23:32 首次发布
本文档详细介绍了如何在Vue前端修改配置以支持IP和localhost访问，并解决后端使用@CookieValue时遇到的问题。前端通过设置Vue.cookie.set('appid', appid)来添加cookie，但在localhost访问时，cookie存储为localhost域，导致IP访问时后端无法获取。解决方案是确保使用IP地址访问页面，以便浏览器存储对应的IP cookie，从而使后端能够正确获取@CookieValue。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、vue前端修改支持ip、localhost访问

config下的index.js

host: '0.0.0.0'

访问后端域名改为

window.SITE_CONFIG['baseUrl'] = 'http://192.168.0.5:8080/platform-admin'

修改后ip、localhost都可以正常访问页面

2、后端使用到@CookieValue

1）、需要前端设置cookie值

Vue.cookie.set('appid', appid)

2）、如果用localhost访问页面，此时cookies中存储的是localhost的cookie

此时访问后端的url已经是ip的，导致无法获取ip的cookie

 cookie

 

需要使用ip访问页面，浏览器存储ip的cookie，这时后端就可以拿到@CookieValue值

 

 

Vue项目开发中优雅的切换服务端ip
qq_35665506的博客
06-22 2552
Vue项目开发中优雅的切换服务端ip 在进行Vue开发的时候，需要配置项目对应服务端的ip地址，但如果需要在多个服务端间进行切换，通常的做法是:手动修改vue.config.js配置文件中的服务端ip并保存，然后重启前端服务。如果一个前端项目所有接口都由同一个服务端提供的情况下，现在提供一个非常简单而且也很优雅的切换服务端ip的方法以供参考。 解析获取命令行中输入的服务端ip 需要在项目的中创建一个server-ip.js文件，用于解析命令行中输入的参数，目前主要是为了获取命令行中输入的服务端ip,并将
在tomcat中发布项目时，用IP地址不能访问项目而用localhost时可以访问成功
nana_qq的专栏
02-04 4563
最近在开发项目中，遇到的一个问题是： 在 tomcat中发布一个web项目，但是发布成功后，只能用http://localhost:8080/fm访问项目，不能用 http://127.0.0.1:8080/fm访问项目，也不能用本地的IP地址访问（http://192.16/8.0.191:8080/fm） 起初认为是防火墙的原因，但是防火墙是关闭的，应该没有影响； 后来认为...
解决Vue3.0 动态配置IP及端口，打包后随时改随时生效
不忘初心,继续前进
03-29 9051
文章目录前言一、建立public目录及配置文件二、封装axios请求及引入1.封装axios请求 api->index.js2.main.js引入上一步封装的index.js3.调用接口代码不变 前言 假如你的Vue项目需要在多个服务器部署，若使用代理的模式，每个环境都需要先改IP地址及端口，再打包，非常的麻烦，所以本文没有用代理，而是通过Ajax同步获取配置文件信息，封装一个axios请求 一、建立public目录及配置文件 在主目录（即和src同目录）创建public文件夹，创建config.
vue 前端灵活改变后端地址
qq_38295468的博客
08-16 2859
很多时候会遇到后台地址变动，不管是在打包或者是开发中；每一次后台开机启动或者换电脑启动后台，后台地址都会随之变动；第二种就不是直接修改地址了，而是配置环境地址；在src的同一级新建.env.development文件；在里面配置好需要的多个后台地址。这个地方要注意一下，因为vue.config.js是在Node.js环境下执行的，而不是在浏览器环境下执行，所以要用Node.js中的require语法。然后我们在打包的时候就可以看到dist里面有一个config.js 文件，就可以在这个文件中修改地址了；
VUE_APP_BASE_API 的值不能写localhost 如果解决
weixin_35752233的博客
01-05 870
VUE_APP_BASE_API 的值不能写 localhost 的原因是，localhost 只能在本地开发环境下使用，在生产环境中应使用服务器的实际 IP 地址或域名。在开发环境下，您可以使用 0.0.0.0 或本地 IP 地址代替 localhost 来访问您的开发服务器。 如果要在生产环境中使用 localhost，您可以将 VUE_APP_BASE_API 设置为本地 IP 地址，然后在...
vue项目调用后端用localhost成功，ip地址则后端接收不到
weixin_42384844的博客
06-24 1551
vue项目调用后端用localhost成功，ip地址则后端接收不到 当需要写明ip+端口号，再调用后台时，配置如下可以实现： 1. .env/development文件 # just a flag ENV = 'development' #ip+端口号时需要设置 VUE_APP_BASE_API = '/dev-api' 2. vue.config.js文件 proxy: { // change xxx-api/login => mock/login // detail: https://
vue配置启动后终端显示localhost和ip访问地址
html5xiaobai的博客
06-11 3299
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 vue配置启动后终端显示localhost和ip访问地址 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Mark
前端Vue.js项目开发,不重启项目,快速切换后台地址---使用nginx负载简单快速实现更换后台代理地址
向上程序员
04-20 1712
本文实现了在vue项目不重启的情况下，快速实现更换联调后台服务器的方法， 能够大大节省vue项目重启时间
vue3项目改成ip地址访问
m0_72203214的博客
08-28 1649
2.在该文件中进行相关配置，从而覆盖默认配置。下创建文件vue.config.js。vue3项目改成ip地址访问。
vue项目配置ip地址访问
weixin_43926335的博客
04-29 1万+
## vue项目配置ip地址访问 第一步：打开运行框windows+r cmd 输入ipconfig 找到ipv4地址 例如192.168.0.1 第二步:修改vue项目下config里面的index.js文件中host值为ip地址 重启项目运行 浏览器输入ip加端口访问 出现问题：自己电脑可以访问，手机不能访问 前提同一wifi下 ip地址没有错 解决方案：...
vue-element-admin登录（改成本地测试地址）
蚂蚁的博客
03-29 2151
第一步：找到根目录下面的vue.config.js 找到before: require(’./mock/mock-server.js’) 并且注释掉， 加上以下代码 proxy: { [process.env.VUE_APP_BASE_API]: { target: 'http://192.168.1.200:8081', // target: 'http://192.168.1.119:8081', // target: 'http://192.168.1.253:8081',
启动vue项目 既能localhost访问又能通过ip访问
qq_31721317的博客
07-30 3196
启动vue项目 既能localhost访问又能通过ip访问 在初始化完一个vue项目(基于vue-cli 和webpack)之后，我们可以通过 npm run dev来让这个项目跑起来， 然后就可以在浏览器里输入localhost:8080就可以访问该项目了。 如果想通过 ip地址进行访问时，就需要配置本地服务器设置文件。 1：找到config文件夹下的index.js文件，将host的值改为 0...
Vue项目本地运行环境下设置既能localhost访问又能IP访问，并且可以外网环境下通过域名访问
u011295864的博客
03-04 1万+
打开项目build下index.js文件，将localhost改为 0.0.0.0，port端口号改不改都行，只要保证这个端口号没有被占用即可。 然后打开项目package.json文件，找到 将红框内的改为： "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --ho...
vue-cli起的webpack项目 用localhost可以访问，但是切换到ip就不可以访问
qq_26505167的博客
05-06 1167
我用的是vux起的一个项目（移动端，基于vue的），因为是移动端的，需要在手机上测试，发现用http://localhost:8081/访问的挺好的，但是换到ip就访问不了，期初我以为是代理的原因，将电脑的代理给关掉了。还是不行，然后改为127.0.0.1访问，发现可以访问，用0.0.0.0访问也可以，就是ip不行。然后就各种google，百度。别人家的方法---都试了好多，发现没效（有点怀疑人生，怀疑是不是我电脑的问题），但是结果就在这，ip就是不可以访问！！！！ 本着一个程序员的本能--不...
记录一次解决后端接口设置cookie设置不上去经过，一级域名可以设置上去cookie，二级域名设置不上cookie
08-14 2232
前言： 公司的一个 web 端项目，项目放在一级域名的某一个目录下方 访问的时候需输入 一级域名+目录+index.html，这个 index.html 是因为服务端人员没配置默认访问 index.html 所以需要加上 领导说这个太麻烦，于是弄了个二级域名，直接指向项目目录的 index.html 接口地址：一级域名+接口 登录之后接口会设置 cookie ，每次请求都携带 cookie OK，项目基本就这样了，现在说情况： 使用一级域名访问项目，谷歌调试，cookie 存在，项目正常 使用二级域名访问项
前后端分离跨域与cookie
pscool的博客
03-26 3027
那么，现在再来看下，一个新的问题，刚刚说到cookie在前后端不分离的情况下，cookie默认就是刚刚说的这样玩的，但是如果和跨域问题一起出现的话，又会怎样呢？浏览器它还会携带cookie吗？那么现在就说到这个cookie的问题，它的本质就是一个请求头（Cookie）和响应头（Set-Cookie），只不过这个头会被默认携带给后台。跨域的配置可以看下这个类，里面的解释很清楚，处理逻辑，可以参考DefaultCorsProcessor这个类。
vue3.x修改端口号配置vue.config.js
热门推荐
hlvy
10-30 4万+
首先在根目录创建vue.config.js    vue.config.js 里面代码: module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * b...
Vue3在打包后自由修改接口地址
b1ackc4t的博客
04-22 3814
需求 vue3项目，后台接口地址需要在打包后自由修改，每次修改后再打包太过麻烦 方案 public文件夹放json配置文件 main.js里读取json配置文件并修改axios全局BaseUrl，且注册全局变量 以此达到修改了axios接口地址并且能够在vue文件里自由访问接口地址的效果 实例 main.js import {createApp} from 'vue' import store from '@/store' import App from './App.vue' import router
vue3新项目修改端口
weixin_46939404的博客
07-23 1507
vue3新项目修改端口
我前端vue 后端django 都是本地localhost 启动 如何验证
最新发布
03-29
在本地开发环境下（Vue 前端 + Django 后端），验证前后端联调是否正常，可按以下步骤操作： --- ### 一、基础环境验证 #### 1. **检查服务端口** - **Vue 默认端口**：通常是 `localhost:8080`（通过 `npm run ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值