我试图从我们的对讲机获取所有文章,但我一直在本地环境中获得CORS错误。
我的API如下所示(“hardcodedToken”是我们出于开发目的临时硬编码的承载令牌
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const intercomApi = createApi({
reducerPath: 'intercomApi',
baseQuery: fetchBaseQuery({
baseUrl: 'https://api.intercom.io/',
prepareHeaders: (headers) => {
const accessToken = 'hardcodedToken';
if (accessToken) {
headers.set('Authorization', `Bearer ${accessToken}`);
headers.set('Content-Type', 'application/json; charset=utf-8');
headers.set('Access-Control-Allow-Origin', '*');
}
return headers;
}
}),
tagTypes: ['Article'],
endpoints: (build) => ({
getIntercomLatestUpdatesArticles: build.query<Article[], void>({
query: () => 'articles',
providesTags: ['Article'],
transformResponse: (response: { results: Article[] }) => {
const filteredResponse: Article[] = response.results.filter(
(item: Article) => item.parent_id === 5388628
);
return filteredResponse.sort((a, b) => b.id - a.id).slice(0, 2);
}
})
});
export const { useGetIntercomLatestUpdatesArticlesQuery } = intercomApi;
export interface Article {
id: number;
type: string;
workspace_id: string;
parent_id: number | null;
parent_type: string;
parent_ids: number[];
title: string;
description: string;
body: string;
author_id: number;
url: string;
state: string;
tags?: string[];
created_at?: number;
updated_at?: number;
}
我试了几乎所有我能找到的,但我仍然不能让它工作。我试着把它部署到开发环境中,它得到了同样的错误。
我的API有问题吗?我得到的数据没有问题的 Postman 。
1条答案
按热度按时间xdnvmnnf1#
这是你的API的问题,而不是你的前端。您的API需要配置为允许来自不同域的调用。它是从 Postman 工作,因为 Postman 不检查你是否被允许做电话。但是浏览器会检查这个。您的API需要返回标头,说明允许哪些域访问它。如果他们不检查这一点,那么你进入的任何网站都可以调用任何在线API,只要你登录到这个API。多亏了CORS,API可以告诉浏览器哪些域可以向它发出请求,从而保护您作为用户的安全。所以,基本上,你需要返回这个头:
而是来自你的API。顺便说一句,这种广泛的访问对于生产环境来说不是一个好主意,因为你可能不希望任何网站能够调用这个API。
.NET核心的示例调试设置(不用于生产)(当然,如果API在.NET核心中):