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

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

配置文件
image.png

代理失败
image.png

-- 更新一下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里面代理的地址
image.png

阅读 4.7k
4 个回答

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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题