programing

CORS + Cordova : 다음 문제: 액세스-제어-원산지 허용

lastcode 2023. 8. 25. 23:42
반응형

CORS + Cordova : 다음 문제: 액세스-제어-원산지 허용

저는 이 문제에 대해 몇 시간 동안 찾아봤지만 여전히 해결책을 찾을 수 없습니다.

저는 앱 코르도바(기본적으로 HTML/JS)를 개발하고 있습니다. 그래서 : 앱은 네비게이터에서 모바일로 실행되고 API에 아약스 요청을 하는 데 어려움이 있습니다. https://developer.riotgames.com/ 하지만 구글 페이지를 받고 싶다고 합시다.

도대체 어떻게 하는 거지, 이게 가능할까요?다음은 간단한 예입니다.

$.ajax({
    type: "GET",
    url: "https://google.com",
    dataType: "text",
    success: function(response){
        alert("!!!");
    },
    error: function(error){
        alert("...");
    }
});

동일한 오류가 반복적으로 발생합니다.

XMLHttpRequest는 https://google.com/ 을 로드할 수 없습니다.요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'null'에 액세스할 수 없습니다.

출처 'null'은 다음에서 코드를 실행하기 때문입니다.file:///D:/Projets/LoL/www/index.html그리고 네비게이터가 차단하고 있다고 읽었지만 보안을 해제하면 작동하지 않습니다.--disable-web-security그리고 물론 가입하고 싶은 서버에 접근할 수 없습니다.

Cordova 화이트리스트 플러그인 https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/ 이 필요합니다.

config.xml에 다음이 있습니다.

<access origin="*" />
<allow-navigation href="*"/>

그리고 Content-Security-Policy 메타를 index.html에 저장합니다.다음과 같은 것:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">

Cordova 화이트리스트 플러그인이 제대로 작동하지 않는 경우 Cordova 고급 Http 플러그인을 사용하여 외부 서버에 전화를 걸 수 있습니다.

다음을 사용하여 설치: cordova 플러그인 추가 cordova-plugin-advanced-http

플러그인 링크: https://github.com/silkimen/cordova-plugin-advanced-http?ref=hackernoon.com

추가 정보: https://hackernoon.com/a-practical-solution-for-cors-cross-origin-resource-sharing-issues-in-ionic-3-and-cordova-2112fc282664

2019년 8월 1일부터 발생하는 문제를 방금 경험하셨다면,액세스-제어-원천 허용 오류..(cordova 사용) 문제와 관련이 있을 수 있습니다.

저는 제 문제를 해결하는 nodejs 서버에 다음을 추가했습니다.

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();
});

nodejs를 사용하는 경우 유용할 수 있습니다.

감사해요.

그럴 필요가 없습니다.

당신은 단지 허가를 바꾸려고 시도할 뿐입니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
    ...
    android:usesCleartextTraffic="true"
    ...>
    ...
</application>

유사한 시나리오에 대한 솔루션을 찾았는데 "access-control-allow-origin은 둘 이상의 오리진을 포함할 수 없습니다."라는 오류가 발생했습니다.

결국 .net 코어 API를 모든 소스를 허용하도록 설정했음에도 불구하고 다음과 같은 결과를 얻었습니다.

public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors();
...

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseCors(builder => builder
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
...

그런 다음 API의 웹 루트에 있는 web.config 파일에 오래된 CORS 명령을 남겼습니다.

     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="https://localhost:444" />
     </customHeaders>

나는 그 관습에 대해 언급했습니다.헤더 섹션이 작동했습니다.

임무 완수!

언급URL : https://stackoverflow.com/questions/37398695/cors-cordova-issues-with-access-control-allow-origin

반응형