vue-cli 3.0 axios 跨域请求代理配置及生产环境 baseUrl 配置
1. 开发环境跨域配置
在 vue.config.js 文件中:
module.exports = {
runtimeCompiler: true,
publicPath: '/', // 设置打包文件相对路径
devServer: {
// open: process.platform === 'darwin',
// host: 'localhost',
port: 8071,
// open: true, //配置自动启动浏览器
proxy: {
'/api': {
target: 'http://127.0.0.1:8100/', //对应自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
}
注意,配置完成后要重启服务
配置 axios 请求的 baseUrl
在 main.js 中:
axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = '/api/' // api 即上面 vue.config.js 中配置的地址
页面中发送请求:
axios.post('/postData/', {
name: 'cedric',
}).then((res) => {
console.log(res.data)
})
此时,虽然发送的请求到地址:http://localhost:8080/api/postData/, 但是已经代理到了地址: http://127.0.0.1:8100/postData/
2. 生产环境 api 请求接口 baseUrl 配置
只需要将 main.js 中 axios 作如下修改:
axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = 'http://api.demourl.com/'
页面中 axios 请求地址的写法不变:
axios.post('/postData/', {
name: 'cedric',
}).then((res) => {
console.log(res.data)
})
实际请求地址为:http://api.demourl.com/postData/
vue-cli 3.0 axios 跨域请求代理配置及生产环境 baseUrl 配置的更多相关文章
- vue-cli 3.0之跨域请求代理配置及axios路径配置
vue-cli 3.0之跨域请求代理配置及axios路径配置 问题:在前后端分离的跨域请求中,报跨域问题 配置: vue.config.js: module.exports = { runtimeCo ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- vue 使用axios 跨域请求数据的问题
axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...
- vue-cli3.0+node.js+axios跨域请求session不一样的问题
一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...
- VUE系列三:实现跨域请求(fetch/axios/proxytable)
1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...
- vue-cli axios跨域 + 反向代理模拟http请求host+referer
axios跨域 配置config->index.js中的proxyTable,内容如下: proxyTable: { // 跨域请求 '/api': { // 注意此处可设置为 '*' 代表不限 ...
- axios跨域请求报错:Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
在做项目时,用到axios,数据用post提交时,老是报错,错误提示为: Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/add' fro ...
- axios 跨域请求允许带cookie,则服务器Access-Control-Allow-Origin应设置为具体域名,否则请求无法获得返回数据
1.通过允许跨域访问实现了跨域请求,但为了使每个请求带上session信息,我设置了withCredentials ,即: axios.defaults.withCredentials = true ...
随机推荐
- html 知识整理
一. 前言 本文全面介绍了html的定义.使用和具体常用标签. 参考资料:菜鸟教程 二.定义 html是HyperText Markup Language的简称,也就是超文本标记语言的缩写.通过htm ...
- IP地址及子网划分
1.IP地址 2.子网掩码 网络号全转为1,主机号全转为0,之后再转化为10进制表示. 3.无分类编址
- [20180619]oradebug peek.txt
[20180619]oradebug peek.txt --//我以前一直以为oradebug peek查看某个地址开始的内容,后面的长度有限制的.--//在linux下,我的测试是60.实际上ora ...
- [20170914]tnsnames.ora的管理.txt
[20170914]tnsnames.ora的管理.txt --//昨天朋友讲tnsnams.ora的内容太长了,而且许多不需要的.管理不方便.我记得以前写[20150409]tnsnames.ora ...
- 洗礼灵魂,修炼python(24)--自定义函数(5)—匿名函数lambda
在这个互联网时代,大家都喜欢匿名,匿名上网,匿名登录,匿名操作等等,都不喜欢实名对吧?(虽然说现在实名制已经快到来,题外话,扯远了),当然python里也有个不喜欢实名的,它的功效优点特殊,说强大吧? ...
- Python scikit-learn (metrics): difference between r2_score and explained_variance_score?
I noticed that that 'r2_score' and 'explained_variance_score' are both build-in sklearn.metrics meth ...
- oracle 日期格式化 TO_CHAR (datetime) 修饰语和后缀
Datetime Format Element Suffixes Suffix Meaning Example Element Example Value TH Ordinal Number DDTH ...
- 解决wordpress上传文件出现http错误问题
解决wordpress上传文件出现http错误问题 问题现象 今天上传约1.4m大小的gif文件到wordpress的媒体库时失败,提示http错误. 原因 由于之前一直上传图片都是可以的,所以推测最 ...
- Shell脚本应用(for、while循环语句和case分支语句)
1.for:读取不同的变量值,逐个执行同一组命令,直到取值完毕退出,变量值以空格分隔 语法: for 变量值 in 取值列表 do 命令序列 done 2.while:重复测试某个条件,成立则执 ...
- BeanFactory和ApplicationContext的简单介绍
引言 Spring通过一个配置文件描述Bean及Bean之间的依赖关系,利用Java语音的反射功能实例化Bean并建立Bean之间的依赖关系.Spring的IoC容器在完成这些底层工作的基础上,还提供 ...