Question

我想测试我的应用并从api获取数据。登录到网络后，我检查了network标签，该标签在request url中返回了headers，例如：https: // beta.application.com / api / v1 / projects /。我可以在我的应用中引用此网址吗？

在console.log中，我有错误

无法加载资源：服务器响应状态为401   （未经授权）

从原始地址chrome-extension：// ccekbkp访问https：// beta.application.com/api/v1/projects/具有   已被CORS政策屏蔽：未响应预检请求   通过访问控制检查：   响应中的“ Access-Control-Allow-Origin”标头不得为   当请求的凭据模式为“包括”时，使用通配符“ *”。的   XMLHttpRequest发起的请求的凭据模式为   由withCredentials属性控制。

网络错误       在createError（webpack-internal：///./node_modules/axios/lib/core/createError.js：16）       在XMLHttpRequest.handleError（webpack-internal：///../node_modules/axios/lib/adapters/xhr.js：87）

示例：

电子邮件：john.asd@gmail.com

密码：aZdfgHkL12

在local.storage中，我可以访问令牌范例：`{access_token：“ 111111111111111111”}

我可以复制此令牌并在React的应用程序中使用它吗？

我正在尝试做到：

  componentDidMount() {
        const token = '111111111111111111'; //token from local.storage 
       /*const hash = Base64.encode(token);
        const Basic = 'Basic ' + hash;*/
        const username= 'john.asd@gmail.com';
        const password= 'aZdfgHkL12'
        const url= "https://beta.application.com/api/v1/projects/";

        axios.get
            axios({
                "url": url,
                "withCredentials": true,
                "method": "GET",
                "headers": {
                    'Authorization': `Bearer ${token}`
                },
                "auth": {
                    username: username,
                    password: password
                }
            })
            .then(response => {
                this.setState({
                    projects: response
                });
            })
            .catch(error => {
                console.log('error');
            })
        }

Answer 1

关于Response to preflight request doesn't pass access control check: It does not have HTTP ok status，您可能想检查this，这似乎是CORS问题。如果这是扩展名，则应在清单中添加正确的permissions和content_security_policy（可能还需要将扩展名服务器端列入白名单）。

关于令牌，应根据服务器的期望将其发送到标头中的服务器：

headers: {
            Authorization: `Bearer ${access_token}`
          }

您甚至可以创建一个新的axios实例来避免一直添加它：

axiosInstance = axios.create({
     headers: {
            Authorization: `Bearer ${access_token}`
     }
});

然后使用它向服务器发送请求

Answer 2

解决方案：

componentDidMount() {
    const token = '111111111111111111'; //token from local.storage 
    const url= "https://beta.application.com/api/v1/projects";

    axios.get
        axios({
            "url": url,
            "method": "GET",
            "headers": {
                'Authorization': `Bearer ${token}`
            }
        })
        .then(response => {
            this.setState({
                projects: response
            });
        })
        .catch(error => {
            console.log('error');
        })
    }

反应axios错误时的简单授权：`createError ...时出现网络错误...

2 个答案: