使用前端代理实现跨域_devServer.proxy

使用前端代理实现跨域_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),