CORS 문제가 있는 Axios

CORS 문제가 있는 Axios

패키지에 프록시를 추가했습니다.json과 잘 작동했는데, npm 실행 후 CORS 문제가 다시 불거졌습니다. npm 실행 후 React 실행 후 CORS 문제를 어떻게 처리해야 하는지 아는 사람 있나요?

다양한 방법으로 Axios 요청에 헤더를 추가하려고 했습니다.단, Axios 요청에 'Access-Control-Allow-Origin' :'을 추가하지 못했습니다.코드는 다음과 같습니다.

패키지.json

  "proxy": {
      "*":{ "target" : "http://myurl"}
   } 

GetData.js

  axios.defaults.baseURL = 'http://myurl';
  axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
  axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
  axios.get(serviceUrl, onSuccess, onFailure)
  .then(resp => { 
        let result = resp.data;
        onSuccess(result);
  })
  .catch(error => {
        if(onFailure) {
            return onFailure(error);
        }
  })
 }

메모: 서버측에서 유효하게 되어 있습니다만, 아직 동작하고 있지 않습니다.현재 서버측에서 코드를 변경할 수 없습니다.내 작업은 클라이언트측에서만 가능합니다.

서버가 클라이언트가 아닌 크로스 오리진 요청을 활성화해야 합니다.이를 위해서는 여러 플랫폼의 구현 및 구성을 이 페이지에 체크할 수 있습니다.

구글 검색에서 여기로 올지도 모르는 사람을 위해 내 해결책을 알려주고 있어. 문제를 호출할 때는 CORS를 설정('UI' API'로했습니다.withCredentials로로 합니다.false 집에서는axios 삭제:

axios({
    method: 'get',
    url: `https://api.someurl.com/subject/v2/resource/somevalue`,
    withCredentials: false,
    params: {
      access_token: SECRET_TOKEN,
    },
  });

은 API를 .access_token.

다른 사람에게 도움이 될 수 있습니다.

데이터를 송신하고 있습니다.react합니다.golang★★★★★★ 。

, ★★★★★★★★★★★★★★★★★★★★★★★★★★★★」w.Header().Set("Access-Control-Allow-Origin", "*")에러는 수정되었습니다.

응답 양식 제출 기능:

async handleSubmit(e) {
    e.preventDefault();
    
    const headers = {
        'Content-Type': 'text/plain'
    };

    await axios.post(
        'http://localhost:3001/login',
        {
            user_name: this.state.user_name,
            password: this.state.password,
        },
        {headers}
        ).then(response => {
            console.log("Success ========>", response);
        })
        .catch(error => {
            console.log("Error ========>", error);
        }
    )
}

Go 서버에는 라우터가 있습니다.

func main()  {
    router := mux.NewRouter()

    router.HandleFunc("/login", Login.Login).Methods("POST")

    log.Fatal(http.ListenAndServe(":3001", router))
}

Login.go,

func Login(w http.ResponseWriter, r *http.Request)  {

    var user = Models.User{}
    data, err := ioutil.ReadAll(r.Body)

    if err == nil {
        err := json.Unmarshal(data, &user)
        if err == nil {
            user = Postgres.GetUser(user.UserName, user.Password)
            w.Header().Set("Access-Control-Allow-Origin", "*")
            json.NewEncoder(w).Encode(user)
        }
    }
}

저도 같은 문제가 있었습니다.콘텐츠 종류를 바꾸자 해결되었습니다.이 솔루션이 도움이 될지는 모르겠지만 도움이 될 수도 있습니다.만약 당신이 콘텐츠 타입에 대해 신경 쓰지 않는다면, 그것은 나에게 효과가 있었다.

axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';

이것은, restrict-origin-when-cross-origin 정책에 의해서 발생합니다.브라우저는 리소스를 공유할 API 서버를 확인하는 사전 요청을 보냅니다.따라서 API 서버에서 오리진을 설정하고 상태를 전송해야 합니다.그 후 브라우저는 API 서버로 요청을 전송할 수 있습니다.

여기 암호가 있습니다.localhost:8000에서 프런트엔드를 실행하고 포트 6000에서 api 서버를 실행하고 있습니다.

const cors = require("cors");

app.options("*", cors({ origin: 'http://localhost:8000', optionsSuccessStatus: 200 }));

app.use(cors({ origin: "http://localhost:8000", optionsSuccessStatus: 200 }));

origin을 프런트엔드 URL로 설정했습니다.이 origin을 true로 설정하면 포트 8000만이 rosource에 액세스할 수 있으며 포트 8000에서 실행되고 있는 프론트엔드에서는 이 리소스에 액세스할 수 없습니다.api 서버에서 라우팅하기 전에 이 미들웨어를 사용합니다.

저는 Vue.js 프로젝트를 진행하면서 같은 CORS 에러가 발생했습니다.프록시 서버를 구축하거나 다른 방법으로 크로스 오리진 apis에 액세스하기 위한 브라우저 보안 설정(예: 크롬)을 비활성화하는 것입니다(이는 일시적인 해결책이며 문제를 해결하는 최선의 방법은 아닙니다).이 두 가지 해결책 모두 제게는 효과가 있었습니다.이후 솔루션에서는 모의 서버나 프록시 서버를 빌드할 필요가 없습니다.두 솔루션 모두 프론트 엔드에서 해결할 수 있습니다.

단말기에서 다음 명령을 입력하여 오리진에서 apis에 액세스하기 위한 크롬 보안 설정을 비활성화할 수 있습니다.

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security

단말기에서 위 명령을 실행하면 보안 설정이 비활성화된 새 크롬 창이 열립니다.이제 프로그램(npm run serve / npm run dev)을 다시 실행합니다.이번에는 CORS 에러가 발생하지 않고 액시오스를 사용하여 GET 요구를 실행할 수 있습니다.

이게 도움이 됐으면 좋겠네요!

나는 이 일이 잘 풀린다.

javascript:

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

및 백엔드(.net core) : 부팅 시:

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

동작 전 컨트롤러에 접속

[EnableCors("AllowOrigin")]

CORS 문제는 브라더스워에서만 발생할 수 있는 문제입니다.서버가 다른 서버의 요청을 허용하지 않기 때문에 발생합니다.

즉, 여기서 사용자 데이터를 가져오기 위해 http://localhost:3000에서 api(http://example.com/users))로 요청을 보내는 경우.

서버가 로컬 호스트를 인식하지 못하는 경우

@CrossOrigin (Origin = "*") // 이 주석을 사용하면 CORS 문제에 직면하지 않는 서버로부터의 모든 요청을 허용합니다.

사용자가 제어할 수 없는 다른 서버에 대한 반응에서 악시를 사용하여 요청을 보내는 경우 이 문제를 해결하는 방법은 http-proxy-middleware를 사용하는 것입니다.

npm i http-middleware // 이 의존관계 설치

axios.{ 메서드: 'post', url: '/content-Type', 헤더: { 'Content-Type': 'application/json', }, 프록시: createProxyMiddleware({ target: 'https://www.api.com', changeOrigin: true}), 데이터: };

이렇게 하면 www.api.com/endpoint으로 프록시 요청이 전송되므로 코르스 문제는 받지 않습니다.

패키지에 이것도 추가해 주세요.json

"실행":"https://www.api.com"

Axios를 사용할 때 같은 문제가 있을 때 이 스레드를 보게 됩니다.응답에서는 no-cors 모드에서 fetch를 사용하면 문제를 해결할 수 있습니다.

왜요?

분명히 Axios는 Request가 아닌 XMLHttpRequest를 사용하고 있으며 CORS가 아직 적용되고 있고 no-cors 모드가 지원되지 않기 때문에 Axios는 실패합니다.

자세한 내용은 이 스레드를 확인하십시오.

이거 드셔보세요.그것은 나에게 효과가 있었다.

axios.get(`http://localhost:4000/api`,{ crossdomain: true }).then((result)=>{
        console.log("result",result);
      }).catch((error)=>{
        console.log("Error",error);
      });

머리글에 추가하기만 하면 됩니다.

headers : {
    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}

" " " 를 할 필요가 .Access-Control-Allow-Origin : *

CORS 문제는 다음과 같이 간단히 해결할 수 있습니다.

다음 값을 사용하여 Google Chrome의 새 바로 가기를 만듭니다(이에 따라 브라우저 설치 경로 업데이트).

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="D:\chrome\temp"

언급URL : https://stackoverflow.com/questions/50949594/axios-having-cors-issue