blocks|key|4622187|text|您不需要。您向其发出请求的服务器必须实现CORS，以便从您的网站访问JavaScript。您的JavaScript无法授予自己访问其他网站的权限。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4622188|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You don't. The server you are making the request to has to implement CORS to grant JavaScript from your website access. Your JavaScript can't grant itself permission to access another website.

blocks|key|4622219|text|尝试使用资源服务来使用flickr+jsonp：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4622220|var+MyApp+=+angular.module('MyApp',+['ng',+'ngResource']);

MyApp.factory('flickrPhotos',+function+($resource)+{
++++return+$resource('http://api.flickr.com/services/feeds/photos_public.gne',+{+format:+'json',+jsoncallback:+'JSON_CALLBACK'+},+{+'load':+{+'method':+'JSONP'+}+});
});

MyApp.directive('masonry',+function+($parse)+{
++++return+{
++++++++restrict:+'AC',
++++++++link:+function+(scope,+elem,+attrs)+{
++++++++++++elem.masonry({+itemSelector:+'.masonry-item',+columnWidth:+$parse(attrs.masonry)(scope)+});
++++++++}
++++};++++++++
});

MyApp.directive('masonryItem',+function+()+{
++++return+{
++++++++restrict:+'AC',
++++++++link:+function+(scope,+elem,+attrs)+{
++++++++++++elem.imagesLoaded(function+()+{
+++++++++++++++elem.parents('.masonry').masonry('reload');
++++++++++++});
++++++++}
++++};++++++++
});

MyApp.controller('MasonryCtrl',+function+($scope,+flickrPhotos)+{
++++$scope.photos+=+flickrPhotos.load({+tags:+'dogs'+});
});|code-block|syntax|javascript|4622221|模板：|4622222|<div+class="masonry:+240;"+ng-controller="MasonryCtrl">
++++<div+class="masonry-item"+ng-repeat="item+in+photos.items">
++++++++<img+ng-src="{{+item.media.m+}}"+/>
++++</div>
</div>|4622223|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Try using the resource service to consume flickr jsonp:

<pre><code>var MyApp = angular.module('MyApp', ['ng', 'ngResource']);

MyApp.factory('flickrPhotos', function ($resource) {
 return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } });
});

MyApp.directive('masonry', function ($parse) {
 return {
 restrict: 'AC',
 link: function (scope, elem, attrs) {
 elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) });
 }
 }; 
});

MyApp.directive('masonryItem', function () {
 return {
 restrict: 'AC',
 link: function (scope, elem, attrs) {
 elem.imagesLoaded(function () {
 elem.parents('.masonry').masonry('reload');
 });
 }
 }; 
});

MyApp.controller('MasonryCtrl', function ($scope, flickrPhotos) {
 $scope.photos = flickrPhotos.load({ tags: 'dogs' });
});
</code></pre>

Template:

<pre><code>&lt;div class="masonry: 240;" ng-controller="MasonryCtrl"&gt;
 &lt;div class="masonry-item" ng-repeat="item in photos.items"&gt;
 &lt;img ng-src="{{ item.media.m }}" /&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

blocks|key|4622279|text|我自己回答的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4622280|CORS+angular+js+%2B+restEasy+on+POST|offset|length|4622281|好吧，最后我来到了这个变通方法:它与IE一起工作的原因是因为IE直接发送POST而不是首先发送印前检查请求来请求许可。但我仍然不知道为什么过滤器不能管理OPTIONS请求，并默认发送过滤器中没有描述的标头(看起来像是唯一情况下的覆盖……也许是restEasy之类的东西...)|4622282|因此，我在rest服务中创建了一个选项路径，该路径使用response+header重写响应并在响应中包含header|4622283|如果有人以前遇到过这种情况，我仍然在寻找一种干净的方法。|4622284|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/22849972/cors-angular-js-resteasy-on-post^0|0|0|Y|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

Answered by myself. 

<a href="https://stackoverflow.com/questions/22849972/cors-angular-js-resteasy-on-post">CORS angular js + restEasy on POST</a>

Well finally I came to this workaround:
The reason it worked with IE is because IE sends directly a POST instead of first a preflight request to ask for permission.
But I still don't know why the filter wasn't able to manage an OPTIONS request and sends by default headers that aren't described in the filter (seems like an override for that only case ... maybe a restEasy thing ...)

So I created an OPTIONS path in my rest service that rewrites the reponse and includes the headers in the response using response header

I'm still looking for the clean way to do it if anybody faced this before.

blocks|key|4622299|text|++++++++var+result=[];
++++++++var+app+=+angular.module('app',+[]);
++++++++app.controller('myCtrl',+function+($scope,+$http)+{
+++++++++++++var+url="";//+your+request+url++++
+++++++++++++var+request={};//+your+request+parameters
+++++++++++++var+headers+=+{
+++++++++++++//+'Authorization':+'Basic+'+%2B+btoa(username+%2B+":"+%2B+password),
++++++++++++'Access-Control-Allow-Origin':+true,
++++++++++++'Content-Type':+'application/json;+charset=utf-8',
++++++++++++"X-Requested-With":+"XMLHttpRequest"
++++++++++++++}
+++++++++++++$http.post(url,+request,+{
++++++++++++++++++++++++headers
+++++++++++++++++})
+++++++++++++++++.then(function+Success(response)+{
++++++++++++++++++++++result.push(response.data);+++++++++++++
++++++++++++++++++++++$scope.Data+=+result;++++++++++++++
+++++++++++++++++},+
++++++++++++++++++function+Error(response)+{
++++++++++++++++++++++result.push(response.data);
+++++++++++++++++++++++$scope.Data+=+result;
++++++++++++++++++++console.log(response.statusText+%2B+"+"+%2B+response.status)
+++++++++++++++});+
+++++});

And+also+add+following+code+in+your+WebApiConfig+file++++++++++++
++++++++var+cors+=+new+EnableCorsAttribute("*",+"*",+"*");
++++++++config.EnableCors(cors);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4622300|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> var result=[];
 var app = angular.module('app', []);
 app.controller('myCtrl', function ($scope, $http) {
 var url="";// your request url 
 var request={};// your request parameters
 var headers = {
 // 'Authorization': 'Basic ' + btoa(username + ":" + password),
 'Access-Control-Allow-Origin': true,
 'Content-Type': 'application/json; charset=utf-8',
 "X-Requested-With": "XMLHttpRequest"
 }
 $http.post(url, request, {
 headers
 })
 .then(function Success(response) {
 result.push(response.data); 
 $scope.Data = result; 
 }, 
 function Error(response) {
 result.push(response.data);
 $scope.Data = result;
 console.log(response.statusText + " " + response.status)
 }); 
 });

And also add following code in your WebApiConfig file 
 var cors = new EnableCorsAttribute("*", "*", "*");
 config.EnableCors(cors);
</code></pre>

blocks|key|116540|text|我们可以通过ngResourse模块在前台开启CORS。但最重要的是，在控制器中发出ajax请求时，我们应该有这段代码，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116541|$scope.weatherAPI+=+$resource(YOUR+API,
+++++{callback:+"JSON_CALLBACK"},+{get:+{method:+'JSONP'}});
+$scope.weatherResult+=+$scope.weatherAPI.get(YOUR+REQUEST+DATA,+if+any);|code-block|syntax|javascript|116542|另外，您必须在脚本部分添加ngResourse+CDN，并在app模块中作为依赖项添加。|116543|<script+src="https://code.angularjs.org/1.2.16/angular-resource.js"></script>|116544|然后在应用程序模块依赖项部分使用"ngResourse“|116545|var+routerApp+=+angular.module("routerApp",+["ui.router",+'ngResource']);|offset|length|style|CODE|116546|entityMap^0|0|0|0|0|0|0|21|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@$O|10|P|11|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

we can enable CORS in the frontend by using the ngResourse module.
 But most importantly, we should have this piece of code while making the ajax 
 request in the controller,

<pre><code>$scope.weatherAPI = $resource(YOUR API,
 {callback: "JSON_CALLBACK"}, {get: {method: 'JSONP'}});
 $scope.weatherResult = $scope.weatherAPI.get(YOUR REQUEST DATA, if any);
</code></pre>

Also, you must add ngResourse CDN in the script part and add as a dependency 
 in the app module.

<pre><code>&lt;script src="https://code.angularjs.org/1.2.16/angular-resource.js"&gt;&lt;/script&gt;
</code></pre>

Then use "ngResourse" in the app module dependency section

<code>var routerApp = angular.module("routerApp", ["ui.router", 'ngResource']);</code>

blocks|key|4622414|text|Apache/HTTPD倾向于在大多数企业中使用，或者如果您在家中使用Centos/等。所以，如果你已经有了它，你可以很容易地做一个代理来添加必要的CORS头。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4622415|我在这个here上有一篇博客文章，因为我最近受了很多次的折磨。但重要的是要将此代码添加到您的/etc/httpd/conf/httpd.conf文件中，并确保您已经在执行"Listen+80"：|offset|length|4622416|<VirtualHost+*:80>
++++<LocationMatch+"/SomePath">
+++++++ProxyPass+http://target-ip:8080/SomePath
+++++++Header+add+"Access-Control-Allow-Origin"+"*"
++++</LocationMatch>
</VirtualHost>|code-block|syntax|javascript|4622417|这将确保所有对您的-server-ip:80/SomePath下的URL的请求都会路由到http://target-ip:8080/SomePath+(不支持CORS的接口)，并返回正确的Access-Control-+allow+-Origin头部，以允许它们与您的web应用程序一起工作。|4622418|当然，如果您愿意，您可以更改端口并以整个服务器为目标，而不是SomePath。|4622419|entityMap|0|LINK|mutability|MUTABLE|url|https://coding-stream-of-consciousness.com/2019/04/15/apache-httpd-proxy-add-cors-headers-to-use-remote-api/|1|http://target-ip:8080/SomePath^0|0|4|4|0|0|0|18|U|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

Apache/HTTPD tends to be around in most enterprises or if you're using Centos/etc at home. So, if you have that around, you can do a proxy very easily to add the necessary CORS headers.

I have a blog post on this <a href="https://coding-stream-of-consciousness.com/2019/04/15/apache-httpd-proxy-add-cors-headers-to-use-remote-api/" rel="nofollow noreferrer">here</a> as I suffered with it quite a few times recently. But the important bit is just adding this to your /etc/httpd/conf/httpd.conf file and ensuring you are already doing "Listen 80":

<pre><code>&lt;VirtualHost *:80&gt;
 &lt;LocationMatch "/SomePath"&gt;
 ProxyPass http://target-ip:8080/SomePath
 Header add "Access-Control-Allow-Origin" "*"
 &lt;/LocationMatch&gt;
&lt;/VirtualHost&gt;
</code></pre>

This ensures that all requests to URLs under your-server-ip:80/SomePath route to <a href="http://target-ip:8080/SomePath" rel="nofollow noreferrer">http://target-ip:8080/SomePath</a> (the API without CORS support) and that they return with the correct Access-Control-Allow-Origin header to allow them to work with your web-app.

Of course you can change the ports and target the whole server rather than SomePath if you like.

blocks|key|116687|text|我遇到了类似的问题，问题出在后端。我使用的是节点服务器(Express)。我收到了来自前端(Angular)的get请求，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116688|+++onGetUser(){
++++++++return+this.http.get("http://localhost:3000/user").pipe(map(
++++++++++++(response:Response)=>{
++++++++++++++++const+user+=response.json();
++++++++++++++++return+user;
++++++++++++}
++++++++))+
++++}|code-block|syntax|javascript|116689|但它给出了以下错误|116690|📷|atomic|offset|length|116691|​|116692|这是使用不带头部的express编写的后端代码|116693|app.get('/user',async(req,res)=>{
+++++const+user=await+getuser();
+++++res.send(user);
+})|116694|在向方法添加了一个头之后，问题就解决了|116695|app.get('/user',async(req,res)=>{
++++res.header("Access-Control-Allow-Origin",+"*");
++++const+user=await+getuser();
++++res.send(user);
})|116696|您可以获得有关Enabling+CORS+on+Node+JS的更多详细信息|116697|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/9ef4d4c17cb4e8a11ba6bab94de302e0.png|imageAlt|1|LINK|MUTABLE|url|https://dzone.com/articles/cors-in-node^0|0|0|0|0|1|0|0|0|0|0|0|0|7|O|1|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1F|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1G|8|@]|9|@$L|1H|M|1I|1|1J]]|A|$]]|$1|N|3|O|5|6|7|1K|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1L|8|@]|9|@]|A|$]]|$1|R|3|S|5|D|7|1M|8|@]|9|@]|A|$E|F]]|$1|T|3|U|5|6|7|1N|8|@]|9|@]|A|$]]|$1|V|3|W|5|D|7|1O|8|@]|9|@]|A|$E|F]]|$1|X|3|Y|5|6|7|1P|8|@]|9|@$L|1Q|M|1R|1|1S]]|A|$]]|$1|Z|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16|17|-4]]|18|$5|19|13|1A|A|$1B|1C]]]]

I encountered a similar problem like this, problem was with the backend . I was using node server(Express). I had a get request from the frontend(angular) as shown below

<pre><code> onGetUser(){
 return this.http.get("http://localhost:3000/user").pipe(map(
 (response:Response)=&gt;{
 const user =response.json();
 return user;
 }
 )) 
 }
</code></pre>

But it gave the following error<a href="https://i.stack.imgur.com/VMF8j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VMF8j.png" alt="The error "></a>

This is the backend code written using express without the headers

<pre><code>app.get('/user',async(req,res)=&gt;{
 const user=await getuser();
 res.send(user);
 })
</code></pre>

After adding a header to the method problem was solved

<pre><code>app.get('/user',async(req,res)=&gt;{
 res.header("Access-Control-Allow-Origin", "*");
 const user=await getuser();
 res.send(user);
})
</code></pre>

You can get more details about <a href="https://dzone.com/articles/cors-in-node" rel="nofollow noreferrer">Enabling CORS on Node JS</a>

I have created a demo using JavaScript for Flickr photo search API. 
Now I am converting it to the AngularJs.
I have searched on internet and found below configuration. 

Configuration:

<pre><code>myApp.config(function($httpProvider) {
 $httpProvider.defaults.useXDomain = true;
 delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
</code></pre>

Service:

<pre><code>myApp.service('dataService', function($http) {
 delete $http.defaults.headers.common['X-Requested-With'];
 this.flickrPhotoSearch = function() {
 return $http({
 method: 'GET',
 url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&amp;api_key=3f807259749363aaa29c76012fa93945&amp;tags=india&amp;format=json&amp;callback=?',
 dataType: 'jsonp',
 headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
 });
 }
});
</code></pre>

Controller:

<pre><code>myApp.controller('flickrController', function($scope, dataService) {
 $scope.data = null;
 dataService.flickrPhotoSearch().then(function(dataResponse) {
 $scope.data = dataResponse;
 console.log($scope.data);
 });
 });
</code></pre>

But still I got the same error.
Here are some links I tried:

<a href="http://stackoverflow.com/q/18733104/3115091">XMLHttpRequest cannot load URL. Origin not allowed by Access-Control-Allow-Origin</a>

<a href="http://goo.gl/JuS5B1" rel="noreferrer">http://goo.gl/JuS5B1</a>

How to enable CORS in AngularJs

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经使用JavaScript为Flickr照片搜索API创建了一个演示。现在我正在将它转换为AngularJs。我已经在网上搜索过了，找到了下面的配置。配置：myApp.config(function($httpProvider) {  $httpProvider.defaults.useXDomain = true...

问如何在AngularJs中启用CORS
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在AngularJs中启用CORSEN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在AngularJs中启用CORS
EN