Question

我使用Vue和Axios向Square API的V2发出客户端请求。我的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方面有一些配置，但我没有机会将域列入白名单等。

之前是否有人遇到此错误，无论服务如何，如果是，您是如何解决的？

Answer 1

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

另外，如果您这样做，我认为您的身份验证令牌需要发送到客户端 - 从而将其暴露给每个人。看起来Square API仅设计为从服务器调用。但这只是基于我略微浏览文档。我没有使用他们的API的经验。

Answer 2

在进行 OAuth 授权请求时，您不应该从您的应用程序中进行。使用参数创建 URL 并在新的浏览器窗口或选项卡中打开它，例如：

 const grants='MERCHANT_PROFILE_READ CUSTOMERS_READ CUSTOMERS_WRITE PAYMENTS_READ PAYMENTS_WRITE PAYMENTS_WRITE_ADDITIONAL_RECIPIENTS PAYMENTS_WRITE_IN_PERSON';
    const params = new HttpParams()
        .set('scope', grants)
        .set('client_id', <YourSquareApplicationId>)
        .set('state', '1878789');
    const requestUrl = `${<squareUrl>}/oauth2/authorize?${params.toString()}`;
    window.open(requestUrl, "_blank");

那个新窗口应该要求最终用户登录他的帐户并接受或拒绝请求。

访问Square V2 API时出现CORs错误

2 个答案: