Блог

Я создаю приложение с vue помощью . В течение долгого времени я всегда использовал devServer свойство через vue-cli для обработки моих api запросов. Это всегда выглядело примерно так:

 devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost/my-project-api',
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        }
    }
}
 

Тогда моя axios просьба будет выглядеть так:

 axios({
    method: "get",
    url: "/api/endpoint/",
    headers: {
        "Content-Type": "application/json;charset=UTF-8"
    },
    responseType: "json"
})
.then((response) => {
    resolve(response.data);
})
.catch((error) => {
    reject(error);
});
 

Это всегда работает нормально, так как в процессе работы моя api папка находится на том же сервере.

Для нового проекта я размещаю свой api на отдельном сервере (поддомене), например https://api.mydomain.com , в то время как мой проект выполняется на поддомене https://project.mydomain.com .

Как мне изменить это в моем прокси-сервере? Я попробовал это:

 proxy: {
    'https://api.mydomain.com': {
        target: 'http://localhost/my-project-api',
        changeOrigin: true,
        pathRewrite: {
            "https://api.mydomain.com": ""
        }
    }
}
 

Тогда мой внутренний запрос axios выглядит следующим образом:

 axios({
    method: "get",
    url: "https://api.mydomain.com/endpoint/",
    headers: {
        "Content-Type": "application/json;charset=UTF-8"
    },
    responseType: "json"
})
.then((response) => {
    resolve(response.data);
})
.catch((error) => {
    reject(error);
});
 

Но иногда я получаю cors жалобу, в которой говорится, что прокси-сервер не использует мой сервер разработчиков.

Есть ли у вас опыт в этом деле?