Ошибка "No 'Access-Control-Allow-Origin' header" при выполнении POST-запроса (Google Firebase)
При попытке выполнить POST-запрос возникает ошибка:
Access to XMLHttpRequest at 'https://identitytoolkit.googleapis.com/v1/accounts:signIpWithPassword?key=stackoverflow' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
auth.js:
import { ref } from 'vue'
import { defineStore } from 'pinia'
import axios from 'axios'
const apiKey = 'stackoverflow' // some api key
export const useAuthStore = defineStore('auth', () => {
const userInfo = ref({
token: '',
email: '',
userId: '',
refreshToken: '',
expiresIn: '',
})
const auth = async (payload) => {
try {
let response = await axios.post(
`https://identitytoolkit.googleapis.com/v1/accounts:signIpWithPassword?key=${apiKey}`,
{
...payload,
returnSecureToken: true,
},
)
userInfo.value = {
token: response.data.idToken,
email: response.data.email,
userId: response.data.localId,
refreshToken: response.data.refreshToken,
expiresIn: response.data.expiresIn,
}
} catch (err) {
switch (err.response.data.error.message) {
case 'EMAIL_NOT_FOUND':
error.value = 'Неверный логин или пароль'
break
case 'INVALID_PASSWORD':
error.value = 'Неверный логин или пароль'
break
default:
error.value =
'Возникла ошибка. Обратитесь к администратору'
break
}
}
}
return { auth, userInfo }
})
main.js:
import './assets/main.css'
import 'ant-design-vue/dist/reset.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { initializeApp } from 'firebase/app'
import Antd from 'ant-design-vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
const firebaseConfig = {} // some config
initializeApp(firebaseConfig)
app.use(createPinia())
app.use(router)
app.use(Antd)
app.mount('#app')
В конфиге firebase localhost
в качестве URL-адреса указан. Сам auth.js используется на странице авторизации:
AuthView.vue:
<script setup>
import FloatingInput from '@/components/FloatingInput.vue'
import { useAuthStore } from '@/stores/auth'
import { ref } from 'vue'
const authStore = useAuthStore()
const login = ref('')
const password = ref('')
const signin = async () => {
await authStore.auth({ email: login.value, password: password.value })
}
</script>
<template>
<div class="auth-page">
<div class="auth-wrapper">
<div class="auth-form">
<div class="auth-form-header">
<div class="auth-form-title">Авторизация</div>
<div class="auth-form-description">Вход в аккаунт</div>
</div>
<FloatingInput v-model="login" label="Логин" type="text" />
<FloatingInput v-model="password" label="Пароль" type="password" />
<button type="submit" class="auth-form-button" @click="signin">
Войти
</button>
</div>
<a href="#" class="auth-advantages">Возникли вопросы?</a>
</div>
</div>
</template>
Испробовал много способов, указывал хедеры в headers: {} в axios запросе — ничего не помогает ?