访问Square V2 API时发生CORs错误 [英] CORs error when accessing Square V2 API

问题描述

我正在使用 Vue 和 Axios .我的Vue组件如下:

import axios from 'axios';
export default {
    mounted() {
        var instance = axios.create({
            baseURL: 'https://connect.squareup.com/v2/',
            timeout: 1000,
            headers: {
                'Authorization': 'Bearer xxxxxxxxxxxxxxxxx',
                'Accepts': 'application/json',
                'Content-Type': 'application/json'
            }
        });
        instance.get('catalog/list')
        .then(function (response) {
            console.log(response);
        }) ;
    }
}

但是，当我拨打电话时，出现以下错误:

Failed to load https://connect.squareup.com/v2/catalog/list: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://local-env.dev' is therefore not allowed access. The response had HTTP status code 403.

该错误表明在Square端必须进行一些配置，但是我看不到将域列入白名单的机会，等等.

任何人都曾遇到过此错误，而不论服务是什么，如果是这样，您如何解决?

解决方案

我不认为Square API支持从浏览器调用.我使用邮递员在https://connect.squareup.com/v2/catalog/list上执行了OPTIONS请求，响应为NOT_FOUND.要获得正确的 CORS支持，需要OPTIONS请求.. >

另外，如果您这样做了，我认为您的身份验证令牌需要发送给客户端-从而将其公开给所有人.看起来Square API仅设计用于从服务器调用.但这只是基于我略读了一些文档.我没有使用他们的API的经验.

I'm making a client-side request out to V2 of the Square API using Vue and Axios. My Vue component is as follows:

import axios from 'axios';
export default {
    mounted() {
        var instance = axios.create({
            baseURL: 'https://connect.squareup.com/v2/',
            timeout: 1000,
            headers: {
                'Authorization': 'Bearer xxxxxxxxxxxxxxxxx',
                'Accepts': 'application/json',
                'Content-Type': 'application/json'
            }
        });
        instance.get('catalog/list')
        .then(function (response) {
            console.log(response);
        }) ;
    }
}

However, when I make that call, I receive the following error:

Failed to load https://connect.squareup.com/v2/catalog/list: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://local-env.dev' is therefore not allowed access. The response had HTTP status code 403.

That error suggests that there is some configuration that has to happen on the Square side, but I saw no opportunity to whitelist domains, etc.

Has anyone come across this error before, regardless of service, and if so, how did you resolve?

解决方案

I don't think the Square API supports being called from a browser. I used Postman to do an OPTIONS request on https://connect.squareup.com/v2/catalog/list and the response was a NOT_FOUND. The OPTIONS request is needed for proper CORS support.

Plus, if you did this, I would think your auth token would need to be sent to the client -- thus exposing it to everyone. It looks like the Square API is only designed to be called from a server. But that is just based on me skimming the docs a bit. I have no experience using their API.

这篇关于访问Square V2 API时发生CORs错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！