使用Redux获取文章的内部通信给出CORS错误

h43kikqp  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(99)

我试图从我们的对讲机获取所有文章,但我一直在本地环境中获得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 。

xdnvmnnf

xdnvmnnf1#

这是你的API的问题,而不是你的前端。您的API需要配置为允许来自不同域的调用。它是从 Postman 工作,因为 Postman 不检查你是否被允许做电话。但是浏览器会检查这个。您的API需要返回标头,说明允许哪些域访问它。如果他们不检查这一点,那么你进入的任何网站都可以调用任何在线API,只要你登录到这个API。多亏了CORS,API可以告诉浏览器哪些域可以向它发出请求,从而保护您作为用户的安全。所以,基本上,你需要返回这个头:

Access-Control-Allow-Origin', '*'

而是来自你的API。顺便说一句,这种广泛的访问对于生产环境来说不是一个好主意,因为你可能不希望任何网站能够调用这个API。
.NET核心的示例调试设置(不用于生产)(当然,如果API在.NET核心中):

builder.Services.AddCors(o => o.AddDefaultPolicy(
   policy => policy
   .WithExposedHeaders("*")
   .AllowAnyOrigin()
   .AllowAnyHeader()));

相关问题