vue-cli脚手架的跨域代理配置

Posted 2022-09-09 勇敢*牛牛

脚手架的代理配置

---

在vue.config.js做文章。

如果你想让请求用上代理，ajax就不能写域名和协议
即ajax请求的地址为 /api/xx/xx/xx
如下：

methods:
    async getDate()
        let ret = await get("/api/film/api/v1/getNowPlayingFilmList");
        console.log(ret);
    

const 
    defineConfig
 = require('@vue/cli-service')
module.exports = defineConfig(
    transpileDependencies: true,
    // 增量去修改webpack中的devServer配置
    devServer:
        proxy:
            // key  =》 去匹配请求的地址  /abc  => 匹配 /abc ,如果你想让请求用上代理，ajax就不能写域名和墙协议
            "/api":
               // https://api.iynn.cn/film/api/v1/getNowPlayingFilmList
                target:"https://api.iynn.cn",// 请求的真实的地址
                changeOrigin:true,// 修改请求主机头，为了让代理更有隐蔽性
                pathRewrite://地址重写
                    "^/api":''
                

            
        
    
)

需要注意的是：
/api和/apiscoend，虽然字符不一样，但是还是会出现这个只会匹配前一个的情况，因为按前面字符串匹配。
不要重名，不要一样的开头。

console.log(process.env.NODE_ENV);
开发者环境：development

也就是可以在http配置文件里
提供了一个属性：process.env.NODE_ENV，判断是否为开发者环境。

export default 
    timeout: 10000,
    baseUrl: process.env.NODE_ENV === "development" ? '' : "https://api.iynn.cn/"

console.log(process.env.NODE_ENV);

在这里插入代码片import axios from "axios";
import settingConfig from "@/config/api/setting.js"
const instance = axios.create();

/* 拦截器 */
// 响应
instance.interceptors.response.use(
    res => res.data,
    err=> Promise.reject(err)
)

// 请求
instance.interceptors.request.use(
    config => 

        config.timeout = settingConfig.timeout
        config.baseURL = settingConfig.baseUrl
        return config;
    

)

/**
 * get请求
 * @param string url 请求的url地址
 * @param object config 额外的请求头信息的补充，可选
 * @returns Promise
 */

export const get = (url,config=) => instance.get(url,config);


/**
 * post请求
 * @param string url 请求的url地址
 * @param object data 请求体数据，可选 例：id:1,name:'aaa'
 * @param object config 额外的请求头信息的补充，可选
 * @returns Promise
 */

export const post = (url,data,config=)=>instance.post(url,data,config);