Блог

Главная - Вопросы по программированию - сталкиваюсь с проблемой Cors после входа в систему

сталкиваюсь с проблемой Cors после входа в систему

#javascript #vuex

#javascript #vuex

Вопрос:

вот мой запрос на получение axios

 async getIpAddress ({commit}) {
    const { data: { ip } } = await axios.get("https://www.cloudflare.com/cdn-cgi/trace", {responseType: "text", transformResponse: data =>
        Object.fromEntries(data.trim().split("n").map(line => line.split("=")))
    });
    console.log(ip);
    commit('setIp', ip)

если request.user.is_anonymous: работает нормально
консоль.журнал является

 [HMR] Waiting for update signal from WDS...   client-entry.js?d267:36 
[Quasar] Running SPA.                         auth.js?e140:216
84.54.84.225                                  client?db9c:48 
[WDS] Hot Module Replacement enabled.         client?db9c:52 
[WDS] Live Reloading enabled.                 backend.js:2237  
vue-devtools  Detected Vue v2.6.11

но после входа в систему я начинаю бороться с cors

 Access to XMLHttpRequest at 'https://www.cloudflare.com/cdn-cgi/trace' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
xhr.js?e38e:160 GET https://www.cloudflare.com/cdn-cgi/trace net::ERR_FAILED

пожалуйста, помогите мне

Комментарии:

1. запрос авторизованного пользователя содержит дополнительные заголовки, которые не разрешены сервером, к которому вы подключаетесь

2. попробуйте удалить этот заголовок (или заголовки) из запроса перед его отправкой.

3. @mangusta Да, вы абсолютно правы, я пытался очистить эти заголовки в axios.get(request) , но все равно не повезло, и я попробовал using fetch() , это действительно сработало гладко, спасибо за ваш совет.

Ответ №1:

Я предпочел использовать этот!!!

 async getIpAddress ({commit}) {
    let response = await fetch("https://ipapi.co/json/");
    let data = await response.json();
    commit('setIp', data.ip) 
}

это хорошо сработало для моего случая

Комментарии:

1. это другой адрес. «cloudflare» также хорошо работал с «fetch»?

2. да, cloudflare тоже работал, но ipapi содержит больше данных, чем cloudflare, включая большое количество бесплатных лимитов, поэтому я выбрал его!

3. кстати, я бы не рекомендовал полагаться на сторонний ресурс. Если ваша цель — получить IP-адрес клиента, вы можете получить его из запроса на стороне сервера

4. Да, вы правы, но я потратил все свое время, чтобы получить IP-адрес пользователей на серверной части, но результатом был не реальный IP-адрес, а наш IP-адрес ngix

5. затем nginx может получить IP-адрес из запроса и передать его серверной части в качестве заголовка или в качестве параметра запроса