사이트 간 fetch/axios 요청 시 JSONP 사용 방법

사이트 간 fetch/axios 요청 시 JSONP 사용 방법

위키피디아 API에서 GET 요청을 하려고 합니다.아래와 같이 jQuery를 사용하면 잘 작동합니다.

$.ajax({
  url: 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Test&callback=JSON_CALLBACK',
  type: 'GET',
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  crossDomain: true,
  dataType: 'jsonp'
}).done(function(data) {
  console.log("Data: ", data);  
});

하지만 fetch나 axios api를 사용하고 싶은데, petch는 request method: OPTIONS로 비행 전에 정지합니다.jQuery에서는 작동하지만 다른 API에서는 작동하지 않는 이유는 무엇입니까?

axios.get('https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Test&callback=JSON_CALLBACK', 
    { headers: {'X-Requested-With': 'XMLHttpRequest',
                'content-type': 'text/plain'}
    })
    .then(function (response) {
        console.log("Response: ", response);  
    });

GET 요청의 Content-Type과 관련이 있을 수 있다는 것을 알았지만, jQuery에서 기본값은 text/plain으로 보이지만, text/html로 전송되는 fetch/axios 요청의 content-type을 변경하려다 실패했습니다.

무엇이 문제인지에 대한 생각은 없습니까?

그 문제는 요청 내용 유형과 관련이 없다는 것을 알게 되었습니다.

문제는 API(fetch 및 axios)가 jsonp 요청을 지원하지 않기 때문입니다.jsonp의 사용법은 저에게 충분히 명확하지 않았습니다. 여기서 좋은 설명을 찾을 수 있었습니다: http://stackoverflow.com/a/6879276/4051961

지원하지는 않지만 jsonp 요청을 수행할 수 있는 대안을 제공합니다.

axios: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp
fetch: https://www.npmjs.com/package/fetch-jsonp

axios로 JSONP에 액세스하는 방법은 실제로 axios를 사용하지 않는 것이 좋습니다.

1. 왜(아니오)에 대한 토론

2. 비슷한 질문

3. 악시오스의 대안제시

단축 설치 시:

npm install jsonp --save

다음과 같이 사용합니다.

var jsonp = require('jsonp');

jsonp('http://www.example.com/foo', null, function (err, data) {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

반응 응용 프로그램에서 문제 발생

Axios는 JSONP를 지원하지 않으며 JSONP 요청을 수행할 수 있는 대안을 제공합니다.

axios: axios: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp 에 대한 jsonp에 대한 설명서를 보려면 다음 링크를 참조하십시오.

여기 제 문서가 있습니다.

1단계:$ npm install jsonp --save

2단계:

import jsonp from 'jsonp';

(구성 요소 상단에 적용됨)

3단계: 반응 구성요소에 메소드 생성:

JSONP () {
        jsonp( "https://*YourUrlHere.jsonp", { name: 'Name Of JSONP Callback Function' }, (error, data) => {
            if (error) {
                this.setState({
                    error,
                });
            } else {
                this.setState({
                    data: data,
                });
            }
        });
    }

yarn add simple-jsonp-promise아니면npm install simple-jsonp-promise

import jsonp from 'simple-jsonp-promise'

async function Test () {
  const url = 'http://...'
  const params = {param1: 1, param2: 2}

  const response = await jsonp(url, {data: params})
  console.log('response:', response)
}

언급URL : https://stackoverflow.com/questions/43471288/how-to-use-jsonp-on-fetch-axios-cross-site-requests