vue-cli 项目部署服务器代理失败

Question

Vue使用代理进行多地址请求服务器接口，在本地的时候，接口都没问题，但是部署在服务器上后，接口虽然带上了相关的代理地址url,但是是404？

配置文件

代理失败

-- 更新一下axios配置文件

import axios from "axios";

import qs from "qs";

import { Message } from "element-ui";

axios.defaults.withCredentials = true;

  

const service = axios.create({

    baseURL: "",

    timeout: 20000,

    retry: 2, // 请求次数,

    withCredentials: true,

    retryInterval: 1000 // 请求超时后，1s再次请求

});

  

service.interceptors.request.use(

// 请求之前的处理,token,(js-cookie),store处理


config => {

    console.log(config);

    config.baseURL =

    config.params && config.params.baseUrl ? config.params.baseUrl : "/local";

    if (!config.params.isForm) {

        config.headers["Content-type"] =

        "application/x-www-form-urlencoded; chartset=UTF-8";

    }

    let UserInfo = JSON.parse(localStorage.getItem("UserInfo")) || {};

    config.params.platformId = UserInfo.PlatformID;

    config.params.isForm && delete config.params.isForm;

    config.params.baseUrl && delete config.params.baseUrl;

    config.params.isDelete && delete config.params.platformId;

    config.method === "POST"

        ? (config.data = qs.stringify({

            ...config.data

        }))

        : (config.params = {

            ...config.params

        });


    config.headers.Authorization = UserInfo.acces_token || null;

    return config;

},

error => Promise.reject(error)

);

  

service.interceptors.response.use(

    response => {

        let res = response;

        // 200 正常请求, 206音视频

        if (res.status === 200 || res.status === 206) {

        let resData = res.data;

        if (resData.Status === 200 || resData.Status === 205) {

        return resData;

    } else {

    Message.error(resData.Message);

    }

}

},

error => {

// 请求超时,处理

    // let errorMessage = JSON.parse(JSON.stringify(error));

    const { config } = error;

    if (!config || !config.retry) return Promise.reject(error);

    // 重新请求次数

    config.retryCount = config.retryCount || 0;

    // 请求次数是否上限

    if (config.retryCount >= config.retry) {

    return Promise.reject(error);

    }

config.retryCount += 1;

// 重新发起请求

    const back = new Promise(resolve => {

        setTimeout(() => {

        resolve();

        }, config.retryInterval || 1);

    });

    // 返回axios实体

    return back.then(() => service(config));

}

);

 
export default service;

请求方法
api是定义的变量，vue.config.js里面代理的地址

Answer 1

在请求接口时，前缀只需要写类似 /apiUrl 就可以了。

Answer 2

你请求接口的时候是怎么写的？

Answer 3

开发时候 vue-cli 会启动一个服务来帮你转发请求，来避免跨域，简易过程如下：
浏览器请求 -> vue-cli -> 最终服务器

部署时一般把前端项目与后端项目部署在同一个服务器，这样就可以避免跨域了，自然也不需要转发请求。

例如你配置的是开发时访问 api/ 自动转发到 https://xx.xx.com/api，那你在打包时请求 https://xx.xx.com/api 即可，可以通过环境变量来区分

Answer 4

话说你既然部署到了服务器上，也不会走你这个proxy代理了吧，你的代理转发不应该考虑在nginx层去加吗