访问 Square V2 API 时出现 COR 错误答案

【问题标题】：CORs error when accessing Square V2 API访问 Square V2 API 时出现 COR 错误
【发布时间】：2017-11-14 12:35:35
【问题描述】：

我正在使用 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 端必须进行一些配置，但我没有看到将域列入白名单等的机会。

之前有没有人遇到过这个错误，无论服务如何，如果有，您是如何解决的？

【问题讨论】：

标签： laravel vue.js axios square

【解决方案1】：

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

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

【讨论】：

正确，客户端调用会暴露您的访问令牌，让任何人都可以访问您的 Square 帐户。
从技术上讲，如果您只为访问令牌提供只读范围，那么这应该不是问题。

【解决方案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");

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

【讨论】：