어떻게 CORS를 반응으로 허용합니까?

어떻게 CORS를 반응으로 허용합니까?

javascript에서 AJAX를 통해 Reactjs를 사용하고 API를 사용하고 있습니다.이 문제를 어떻게 해결할 수 있을까요?이전에는 CORS 툴을 사용했지만, 현재는 CORS를 유효하게 할 필요가 있습니다.

리액트에서는 6가지 방법이 있는데

1번, 2번, 3번이 가장 좋습니다.

서버측에서의1 구성 CORS

다음과 같이 수동으로 헤더를 2개 설정합니다.

resonse_object.header("Access-Control-Allow-Origin", "*");
resonse_object.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

여기서 설명하는 proxy_pass의 3-config NGINX.

4 - cross-origin-policy with chrom extension (개발 전용으로 권장되지 않음)을 바이패스합니다.

5-아래 URL을 사용한 교차원 정책 우회(개발 전용)

"https://cors-anywhere.herokuapp.com/{type_your_url_here}"

6회 사용proxy당신의 안에서package.json파일:(개발 전용)

이것이 API인 경우:http://45.456.200.5:7000/api/profile/

이 부분을 에 추가합니다.package.json파일:"proxy": "http://45.456.200.5:7000/",

API의 다음 부분에서 요청을 합니다.

React.useEffect(() => {
    axios
        .get('api/profile/')
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
});

서버 측에 CORS 활성화 코드를 추가하는 것이 좋습니다.NodeJs 및 ExpressJs 기반 애플리케이션에서 CORS를 활성화하려면 다음 코드를 포함해야 합니다.

var app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

리액트에서 CORS 문제를 해결하는 방법에서 반복적으로 질문할 수 있습니다.JS

CORS는 서버가 웹 브라우저를 사용하여 해당 정보를 읽을 수 있는 일련의 발신기지를 기술할 수 있도록 하는 새로운 HTTP 헤더를 추가함으로써 기능합니다.교차 도메인을 허용하도록 서버에서 구성해야 합니다.

CORS라는 크롬 플러그인으로 이 문제를 일시적으로 해결할 수 있습니다.

나는 이 문제를 몇 시간 동안 다룬다.요청은 Reactjs(javascript)이고 백엔드(API)는 Asp라고 합니다.넷 코어

요청에서는 헤더 Content-Type으로 설정해야 합니다.

Axios({
            method: 'post',
            headers: { 'Content-Type': 'application/json'},
            url: 'https://localhost:44346/Order/Order/GiveOrder',
            data: order,
          }).then(function (response) {
            console.log(response);
          });

백엔드(Asp.net core API)에는 다음과 같은 설정이 필요합니다.

1. Startup --> Configure Services:

#region Allow-Orgin
            services.AddCors(c =>
            {
                c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });
            #endregion

2. 스타트업 --> Configure before 앱에서 선택합니다.UseMvc() :

app.UseCors(builder => builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());

3. 조치 전 컨트롤러:

[EnableCors("AllowOrigin")]

node.js의 서버측에서 이것을 추가했는데, 동작했습니다.로컬 머신의 reactjs 프론트 엔드는 azure에서 호스트되는 api 백엔드에 액세스할 수 있습니다.

// Enables CORS
const cors = require('cors');
app.use(cors({ origin: true }));

크로스 오리진 API 콜을 수행하려면 backend server.js 파일에 cors를 추가해야 합니다.

const cors = require('cors');
app.use(cors())

http://localhost:3000 에서https://yourwebsitedomain/app/getNames 를 눌러 다음과 같이 변경합니다.

packagae.json:

   "name": "version-compare-app",
   "proxy": "https://yourwebsitedomain/",
   ....
   "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
     ...

구성 요소에서 다음과 같이 사용합니다.

import axios from "axios";

componentDidMount() {
const getNameUrl =
  "app/getNames";

axios.get(getChallenge).then(data => {
  console.log(data);
});

}

로컬 서버를 중지하고 npm start를 다시 실행합니다.기록된 브라우저 콘솔의 데이터를 볼 수 있어야 합니다.

여기서 무슨 일이 일어나고 있는지 이해하는 데 꽤 오랜 시간이 걸렸다.요청하신 API 측에서 CORS를 설정해야 한다는 것을 몰랐던 것 같습니다.적어도 내 문제에서는 리액트에 관한 것이 아니었다.API가 다르기 때문에 다른 답변은 모두 작동하지 않을 수 있습니다.

Python 기반 API용 솔루션(FastAPI/Flask)

React에서 FastAPI로 요청을 수행하는 경우 https://fastapi.tiangolo.com/tutorial/cors/#use-middleware에 대한 지침을 참조하십시오.

React to Flask에서 요청을 수행하는 경우 https://flask-cors.readthedocs.io/en/latest/가 필요할 수 있습니다.

후 URL 등).http://127.0.0.1:8000/items)

패키지에 프록시를 추가하는 중입니다.크롬 확장 기능을 사용한 바이패스나 json은 해결책이 아닙니다.루트를 등록하기 전에 서버측에서 CORS를 유효하게 하고 있는 것을 확인해 주세요.예시는 Node.js 및 Express.js에 있습니다.이게 도움이 됐으면 좋겠네요!

    app.use(cors())
    app.use('/users', userRoutes)

이걸 쓰세요.

app.use((req,res, next)=>{
    res.setHeader('Access-Control-Allow-Origin',"http://localhost:3000");
    res.setHeader('Access-Control-Allow-Headers',"*");
    res.header('Access-Control-Allow-Credentials', true);
    next();
});

언급URL : https://stackoverflow.com/questions/46337471/how-to-allow-cors-in-react-js