移动端手机网站建设,苏州做企业网站建设,东莞网站优化流程,洛阳网站建设找洛阳铭信网络Vue项目proxyTable跨域配置文章说明proxyTable跨域配置config / dev.env.jsconfig / prod.env.jsconfig / index.jsutils / request.js接口api.js路径转换解析文章说明
学习连接 - 重要❤ - 一文详解vue-cli2.0与vue-cli3.0之间的区别 1. vue cli 2.0项目2. 本地运行时#x…
Vue项目proxyTable跨域配置文章说明proxyTable跨域配置config / dev.env.jsconfig / prod.env.jsconfig / index.jsutils / request.js接口api.js路径转换解析文章说明
学习连接 - 重要❤ - 一文详解vue-cli2.0与vue-cli3.0之间的区别 1. vue cli 2.0项目2. 本地运行时不同端口号前后端项目数据互通 通过proxyTable所以只在index.js 里面的 dev配置了
proxyTable跨域配置
config / dev.env.js
use strict
const merge require(webpack-merge)
const prodEnv require(./prod.env)module.exports merge(prodEnv, {NODE_ENV: development,API_ROOT: http://192.168.2.121:8088/api
})
config / prod.env.js
use strict
module.exports {NODE_ENV: production,API_ROOT: https://www.***.com/api // https://线上域名/api
}
config / index.js
use strictconst path require(path)
//const url https://线上域名/api/; //正式接口服务器路径
const url http://127.0.0.1:8002; //本地访问后端路径module.exports {dev: {// PathsassetsSubDirectory: static,assetsPublicPath: /,proxyTable: {/api: {target: url,changeOrigin: true, // 跨域pathRewrite: {^/api: / //把路径里面的api去掉}}},// Various Dev Server settingshost: 192.168.2.121, // can be overwritten by process.env.HOSTport: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined... ...}build: {// Template for index.htmlindex: path.resolve(__dirname, ../dist/index.html),// PathsassetsRoot: path.resolve(__dirname, ../dist),assetsSubDirectory: static,assetsPublicPath: /,... ...}utils / request.js //新建 axios 实例 -- https://www.axios-http.cn/docs/intro
const request axios.create({baseURL: process.env.API_ROOT, //前端路径会通过 index.js 的 proxyTable 跨域处理timeout: 100000, //请求超时withCredentials: true, // 跨域请求允许保存cookie
})... ...
接口api.js
import request from ./request;export function getCaptcha (){return request({url: /captcha,method: get,responseType: arraybuffer})
}路径转换解析
本地访问页面http://127.0.0.1:8088/index
后端访问接口http://127.0.0.1:8002/captcha
直接从前端访问后端数据不通通过proxyTable进行跨域配置/api: {target: url,这个含义就是 用 /api 区分访问 页面 还是 接口数据 http://127.0.0.1:8088/api 就是访问target http://127.0.0.1:8002/apiproxyTable: {/api: {target: url,changeOrigin: true, // 跨域重要pathRewrite: {^/api: / //把路径里面的api去掉}
}pathRewrite 作用路径重写因为后端接口路劲没有 /api 这个字符串http://127.0.0.1:8088/api/captcha 就是访问target http://127.0.0.1:8002/api/captcha 通过pathRewrite http://127.0.0.1:8002/captcha
