AngularJS 오류: 크로스 오리진 요청은 프로토콜 체계(http, data, chrome-extension, https)에서만 지원됩니다.
나는 매우 단순한 angular js 어플리케이션의 파일을 3개 가지고 있다.
index.displaces를 표시합니다.
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div class="list-group-item" ng-repeat="product in store.products">
<h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>
</div>
<product-color></product-color>
</body>
</html>
product-color.disclor.discloes
<div class="list-group-item">
<h3>Hello <em class="pull-right">Brother</em></h3>
</div>
app.module
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function($http){
this.products = gem;
}
);
app.directive('productColor', function() {
return {
restrict: 'E', //Element Directive
templateUrl: 'product-color.html'
};
}
);
var gem = [
{
name: "Shirt",
price: 23.11,
color: "Blue"
},
{
name: "Jeans",
price: 5.09,
color: "Red"
}
];
})();
productColor라는 커스텀 디렉티브를 사용하여 product-color.html의 include를 입력하자마자 이 오류가 표시되기 시작했습니다.
XMLHttpRequest cannot load file:///C:/product-color.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/product-color.html'.
뭐가 잘못됐나요?product-color.html 경로 문제입니까?
같은 폴더에 .C:/user/project/
이 오류는 html 문서를 브라우저에서 직접 열었기 때문에 발생합니다.이 문제를 해결하려면 웹 서버에서 코드를 처리하고 로컬 호스트에서 액세스해야 합니다.Apache 설정이 있는 경우 파일을 처리하는 데 사용합니다.일부 IDE는 웹 서버에 내장되어 있습니다.예를 들어 JetBrains IDE, Eclipse...
노드가 있는 경우.Js 셋업은 http-server를 사용할 수 있습니다.그냥 뛰어!npm install http-server -g 하면 ''에서처럼할 수 거예요.http-server C:\location\to\app.
매우 간단한 수정
- 앱 디렉토리로 이동
- 심플하게 시작HTTPS 서버
내 ★★★★★
$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer
이제 브라우저에서 localhost:8000으로 이동하면 페이지가 나타납니다.
크롬에서는 작업이 허용되지 않습니다.HTTP 서버(Tomcat)를 사용하거나 Firefox를 대신 사용할 수 있습니다.
제 문제는 추가만으로 해결되었습니다.http://를 , 나는 "URL 주소를 사용하고 .http://localhost:3000/movieslocalhost:3000/movies.
이것을 Chrome/Chromium 브라우저(Ubuntu 14.04)에서 사용하고 있는 경우는, 다음의 몇개의 커맨드를 사용해 이 문제를 해결할 수 있습니다.
ThinkPad-T430:~$ google-chrome --allow-file-access-from-files
ThinkPad-T430:~$ google-chrome --allow-file-access-from-files fileName.html
ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files
ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files fileName.html
그러면 파일을 크롬 또는 크롬으로 로드할 수 있습니다. 에 조작을 가 있는 는, 이 하거나, 에서할 수 .cmd, 에서 기본적으로되지 않습니다.크롬, 오페라, 인터넷 익스플로러파이어폭스 사파리따라서 이 명령어를 사용하면 도움이 됩니다.
또는 임의의 웹 서버에서 호스트할 수도 있습니다(예:Tomcat-java, NodeJS-JS, Tornado-Python 등)을 사용할 수 있습니다.이것은, 어느 브라우저에서도 동작합니다.
어떤 이유로든 웹 서버에서 파일을 호스트할 수 없고 여전히 부분 로딩 방법이 필요한 경우ngTemplate★★★★★★ 。
이렇게 하면 index.html 파일에 스크립트태그 안에 마크업을 포함할 수 있습니다.실제 디렉티브의 일부로서 마크업을 포함할 필요는 없습니다.
이것을 index.html에 추가합니다.
<script type='text/ng-template' id='tpl-productColour'>
<div class="list-group-item">
<h3>Hello <em class="pull-right">Brother</em></h3>
</div>
</script>
그 후 지시사항을 다음과 같이 입력합니다.
app.directive('productColor', function() {
return {
restrict: 'E', //Element Directive
//template: 'tpl-productColour'
templateUrl: 'tpl-productColour'
};
}
);
근본 원인:
파일 프로토콜이 Chrome에 대한 원본 간 요청을 지원하지 않습니다.
해결책 1:
파일 대신 http protocol을 사용합니다.즉, apache 또는 nodejs+http-server 등의 http 서버를 설정합니다.
소테이션 2:
Chrome의 바로 가기 대상 뒤에 --allow-file-access-from-files를 추가하고 이 바로 가기를 사용하여 새 찾아보기 인스턴스를 엽니다.
해결책 3:
대신 Firefox 사용
- 명령어 http-server 를 하고, 「」를 실행하고 를 인스톨 .
npm install http-server -g - index.html이 있는 경로에서 터미널을 엽니다.
- 실행
http-server . -o - 맛있게 드세요!
xampp, mamp 타입의 것을 사용할 수도 있고 프로젝트를 htdocs 폴더에 저장하여 localhost에서 액세스할 수 있도록 할 수도 있습니다.
이미 서버를 실행하고 있다면 API 호출에서 http://를 사용하는 것을 잊지 마십시오.이것은 심각한 문제를 일으킬 수 있습니다.
이유
Apache와 같은 서버를 통해 페이지를 열지 않기 때문에 브라우저가 리소스를 가져오려고 할 때 다른 도메인에서 가져온 것으로 간주되지만 허용되지 않습니다.일부 브라우저는 허용하지만요.
솔루션
inetmgr을 실행하여 로컬로 페이지를 호스트하고 http://localhost:portnumber/PageName.html 또는 Apache, nginx, node 등의 웹 서버를 참조합니다.
또는 다른 브라우저를 사용 Firefox 및 Safari를 사용하여 직접 페이지를 열 때 오류가 표시되지 않았습니다.Chrome 및 IE(xx) 전용입니다.
괄호, 서브라임, 메모장++와 같은 코드 에디터를 사용하는 경우 이러한 앱은 자동으로 이 오류를 처리합니다.
이 문제는 Firefox 및 Safari에서는 발생하지 않습니다.최신 버전의 xml2json.js를 사용하고 있는지 확인합니다.IE에서 XML 파서 오류가 발생했기 때문입니다.Chrome에서는 Apache나 XAMPP와 같은 서버에서 열어야 합니다.
크롬 확장자 200ok이 있습니다. 크롬용 웹 서버입니다. 그것을 추가하고 폴더를 선택하십시오.
다음 플래그를 사용하여 크롬을 열어야 합니다. 실행 메뉴로 이동하고 "chrome --disable-web-security --user-data-dir"를 입력해야 합니다.
플래그를 사용하여 크롬을 열기 전에 크롬의 모든 인스턴스가 닫혀 있는지 확인하십시오.CORS가 유효함을 나타내는 보안 경고가 표시됩니다.
@Kirill Fuchs에 뛰어난 솔루션을 추가하여 @StackUser의 의구심에 답합니다.http-server를 기동하는 동안 html 페이지가 아닌 앱 폴더에만 경로를 설정합니다. http-server C:\location\to\app및 액세스index.html아래app폴더
C:/user/project/index.html로 이동하여 Visual Studio 2017, File > View in Browser에서 열거나 Ctrl+Shift 키를 누릅니다.+W
저도 같은 문제가 있었습니다.제 app.js 파일에 아래 코드를 추가한 후 수정되었습니다.
var cors = require('cors')
app.use(cors());
언급URL : https://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes
'programing' 카테고리의 다른 글
| React JS:Formik을 사용하여 이미지/파일 업로드를 처리하는 방법 (0) | 2023.03.16 |
|---|---|
| 제품 바리에이션 속성 값 용어 ID 및 이름 가져오기 (0) | 2023.03.16 |
| BODY에서 POST 요청을 신속하게 보내는 방법 (0) | 2023.03.16 |
| css 모듈에 클래스를 네스트하고 어떻게 반응합니까? (0) | 2023.03.16 |
| SQL Developer에서 저장 프로시저를 실행하시겠습니까? (0) | 2023.03.16 |