NextJs CORS 문제

NextJs CORS 문제

Vercel(www.example.com)에서 호스팅하는 Next.js 앱을 사용하고 있습니다.이 앱은 백엔드와 통신해야 합니다.api.example.com의 다른 서버에서 호스트되는 NET Core Web API..NET core web api는 CORS를 허용하도록 설정되어 있지만 Next.js는 AX를 사용하면 데이터가 표시되지 않는다고 계속 불평합니다.응답에 allow-cors 헤더가 없기 때문에 IOS가 데이터를 가져옵니다.

오리진 'http://www.example.com'에서 XMLHttpRequest로의 액세스가 CORS 정책에 의해 차단되었습니다.비행 전 요청에 대한 응답이 액세스 제어 검사를 통과하지 못했습니다.요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.

를 사용하여 로컬로 실행하면 정상적으로 동작합니다.npm run dev를 빌드하고 실행해도 동작하지 않습니다.npm run start

코르스 문제를 어떻게 해결할 수 있는지 아는 사람 있나요?

여기서 해결책을 찾았습니다.

기본적으로 루트 디렉토리에 next.config.js 파일을 추가하고 다음 파일을 추가하면 됩니다.

// next.config.js
module.exports = {
    async rewrites() {
        return [
          {
            source: '/api/:path*',
            destination: 'https://api.example.com/:path*',
          },
        ]
      },
  };

를 사용하고 싶은 경우cors도서관nextjs, 나는 그것을 위해 도서관을 만들었습니다.

https://www.npmjs.com/nextjs-cors

https://github.com/yonycalsin/nextjs-cors

페이지/api/woami.{ts,syslog}

import NextCors from 'nextjs-cors';

async function handler(req, res) {
   // Run the cors middleware
   // nextjs-cors uses the cors package, so we invite you to check the documentation https://github.com/expressjs/cors
   await NextCors(req, res, {
      // Options
      methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
      origin: '*',
      optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
   });

   // Rest of the API logic
   res.json({ message: 'Hello NextJs Cors!' });
}

OPTIONS 요구를 받아들이지 않는 것은 서버에서 문제가 있었습니다.루트가 GET::something 또는 POST::something으로 선언되어 있기 때문에 프리플라이가 통과하지 못하고 POST 요구가 취소되었기 때문에 다른 사람이 몇 시간 동안 구글링을 하지 않도록 하기 위해 이 기능을 서버에 추가해야 했습니다(Node.js + Express.js).

  app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(
      "Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
  if (req.method == "OPTIONS") {
    res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
    return res.status(200).json({});
  }

  next();
});

저도 같은 문제가 있어서 이 페이지에서 전화를 걸었습니다.

페이지/페이지1.2011

  export default async function page1() {
       const data = await axios.post('https://www.dominio.com/xxx' , {param: 1}, headers)
}

그러나 해결책은 "pages/api" 디렉토리 내의 로컬 API 파일에 악시오스를 호출하는 것이며, 이 로컬 API 파일은 외부 웹 서버에 대한 요청을 처리합니다.이를 통해 CORS 문제를 피할 수 있습니다.

페이지/페이지1.2011

export default async function page1() {
        const data = await axios.post('/api/get_page1_data', {param: 1} )
}

pages/api/get_page1_data.module

export default async function handler(req, res) {
try{
   const data = await axios.post('https://www.dominio.com/xxx' , {param: req.body.param}, headers)
    res.status(200).json(data)
 } catch (error) {
    console.error(error)
    return res.status(error.status || 500).end(error.message)
  }

내 문제였던 기본 URL이 맞는지 추가로 확인하세요.

이 경우, 어그레시브 HTTP 메서드필터 때문에 프리플라이트 요구가 실패했습니다.

반드시 다음을 지정해 주세요.

  // Preflight Check:
  if (req.method == "OPTIONS") {
    res.setHeader("Allow", "POST");
    return res.status(202).json({});
  }

  // Allow only POST Methods 
  if (req.method !== "POST") {
    res.setHeader("Allow", "POST");
    return res.status(405).json({ error: `Method ${req.method} Not Allowed` });
  }

https://vercel.com/support/articles/how-to-enable-cors#enabling-cors-in-a-next.js-app,에서 모든 메서드를 허용할 수 있지만 OPTIONS HTTP 메서드의 2XX 상태 코드를 각 엔드포인트에서 반환해야 합니다.

확인 부탁드립니다.CORS는 '아까', '아까', '아까', '아까', '아까', '아까', 이렇게...400★★★★★★★★★★★★★★★★★★★★★★★★★★★를 봐 주세요.Response탭을 클릭합니다.

몇 시간 동안 구글을 검색한 후 다음 번 검색 자체에서 해결책을 찾았습니다!!!

github에서 다음 저장소를 참조하십시오.

CORS에서의 API 루트 예시

https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors

graphql 및 Apollo Client 설정(apollo 버전: 3.5.10)이 있는 Next.js 응용 프로그램이 있습니다.컴포넌트 내부에서 쿼리를 작성하려면 Apollo Client가 제공하는 "클라이언트" 변수를 사용해야 합니다.프로젝트 루트에 apollo-client.js 파일이 있어야 Apollo Client가 모든 구성 요소 내에서 쿼리를 위해 이 파일을 사용할 수 있습니다.클라이언트와 같은 쿼리를 작성하려고 할 때 컴포넌트 내부.query(...)는 이러한 아폴로 클라이언트 파일의 설정을 사용하면 "filename" 오류를 발생시킵니다.그러나 apollo-client 파일 내에 헤더 속성을 추가하여 이 문제를 해결할 수 있습니다.

이것은 OLD 설정입니다.

apollo-client.display(구)

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

새로운 설정입니다.

apollo-client.vp (신규)

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
  headers: {
    fetchOptions: {
      mode: 'no-cors',
    },
  },
});

export default client;

이렇게 하면 컴포넌트 내부에서 쿼리를 실행하는 동안 "cors" 오류가 발생하지 않습니다.

언급URL : https://stackoverflow.com/questions/65058598/nextjs-cors-issue