Почему я не могу отправить POST запрос с axios или vue-resource?

Question

[brusk001]

Добрый день. Не могу отправить post запрос через vue-resource или axios, в обоих случая ошибка : Access to XMLHttpRequest at 'https://api.bitaps.com/btc/v1/create/payment/address' from origin 'localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Нашел инфу про заголовки
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token'
но все равно такая же ошибка.

Код компонента

<template>
    <div class="container">
        <div class="row">
            <div class="col text-center mt-5">
                <button class="btn btn-lg btn-success" type="button" v-on:click="getBtcAddress">Get Btc</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            forwarding_address: '18Hh2hEY8cV4mk9dQwjzyjkEzrUgMY71Kv',
            callback_link: 'http://www.2qgsl7gnaiiypmda.onion/handler',
            confirmations: 2
        }
    },
    methods: {
        getBtcAddress: function() {
            const options = {
                headers: {    
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
                    'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token'
                }
            }
            this.axios.post('https://api.bitaps.com/btc/v1/create/payment/address', {forwarding_address: this.forwarding_address, callback_link: this.callback_link, confirmations: this.confirmations}, options).then((response) => {
                console.log(response.data)
            })
        }
    }
}
</script>

Answer 1

[brusk001]

Есть вариант убить CORS в хроме (open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir localhost:8100 --disable-web-security), все работает, но это как-то не гуманно, и не понятно будет ли работать на продакшене.

Comments

[tvsjke]

Кончено не будет работать

Если ты откроешь консоль и посмотришь на вкладку Network, то увидишь, что сначала браузер посылает на сервер запрос OPTIONS (о чем он тебе и сообщает в ошибке Response to preflight request doesn't pass access control check)

То, что ты передаешь заголовки на сервер, это конечно прекрасно, но на ответ сервера по запросу OPTIONS это никак не влияет

[brusk001]

tvsjke, Тогда почему если я отключаю --disable-web-security у хрома все работает и ответ приходит с сервера? Подскажите как вы обходите CORS при разработке.

[brusk001]

Решил. Удалил к ебеням vue.config.js
отправил запрос через проксю https://cors-anywhere.herokuapp.com/ хз на сколько универсально, но все работает.

[Ihor Bratukh]

brusk001, а на проде что делать будете?

[brusk001]

Ihor Bratukh, пока не знаю. Можете помочь с проксированием, у меня почему-то все попытки в ошибку выпадают.

[Ihor Bratukh]

Сложно ответить, так как поддержка тостера фильтрует слово п р о к с и, буду называть пркс.
brusk001, на бэке что крутится, нода, пыха?
Если нода, то за вас уже все сделали https://www.npmjs.com/package/express-http-пркс или можно самому через express, будет строк 20. Если пыха то погуглите, тоже не сложно:
пркс request php

Answer 2

[Ihor Bratukh]

Эти заголовки должны быть на сервере куда вы кидаете запрос а не на клиенте. Или проксируйте запрос через свой сервер или посмотрите доки по api, возможно там токен какой-то нужен.

Comments

[brusk001]

Ihor Bratukh Токена нет, доки по api посмотрел, по описанию все должно быть просто и легко.
Накопал в документации vue-cli

module.exports = {
    devServer: {
        proxy: 'https://api.bitaps.com/btc/v1'
        // подставил сервер с api 
    }
}

Заменил адрес запроса и убрал заголовки

methods: {
        getBtcAddress: function() {
            this.axios.post('http://localhost:8080/create/payment/address', {forwarding_address: this.forwarding_address, callback_link: this.callback_link, confirmations: this.confirmations}).then((response) => {
                console.log(response.data)
            })
        }
    }

Ошибка CORS пропала, но теперь ответ

POST localhost:8080/create/payment/address 404 (Not Found)
dispatchXhrRequest @ xhr.js?b50d:172
xhrAdapter @ xhr.js?b50d:11
dispatchRequest @ dispatchRequest.js?5270:59
Promise.then (async)
request @ Axios.js?0a06:53
Axios. @ Axios.js?0a06:78
wrap @ bind.js?1d2b:9
getBtcAddress @ GetBtc.vue?110b:22
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js?2d83:16)
at settle (settle.js?467f:17)
at XMLHttpRequest.handleLoad (xhr.js?b50d:59)