使用前端代理实现跨域_devServer.proxy
一、什么是跨域?
跨域就是 协议、域名、端口号 其中有一个不同就属于跨域;
跨域的存在是为了提高我们服务器数据的安全性
二、如何跨域?
基于我使用的是vue框架,所以要在根目录创建一个名为vue.config.js的文件
其中的跨域配置就是在devServer.proxy中
module.exports = {
//打包时静态资源的源地址指向
publicPath: "./",
devServer: {//服务相关的配置
//打开服务时的端口号
port: 8888,
//服务打开后使用的主机名
host: "127.0.0.1",
//是否使用https协议
https: false,
//启动服务时是否启动浏览器
open: false,
//代理的相关配置
proxy: {
//跨域时使用的接口字段
"/dev_api": {
//跨域路由字段映射的跨域地址,也就是在服务中,使用/dev_api接口时,它实际上访问的是http://localhost:8080
target: "http://localhost:8080",
//是否使用代理
changOrigin: true,
//最后改写路径,将/dev_api改为空 就是实际上不展示/dev_api接口在url上
pathRewrite: {
"^/dev_api": ""
}
}
}
},
//是否打开格式检查
lintOnSave: false,
//打包时是否生成*.map文件
productionSourceMap: false
}
除了地址和api,其余基本上是固定格式
API封装
/* 跨域路由接口 */
var BASE_API = "/dev_api"
export const Indexdata = BASE_API + "/Indexdata.json"
请求数据
<script>
import { Indexdata } from "./API/API_TYPE";
export default {
created() {
this.$GET(Indexdata).then(response => {
console.log(response.data);
});
}
};
</script>
$GET是我封装的axios,返回的是一个promise对象,可以在前两篇文章中看到
用法this.$GET(URL,data),