AngularJS：CORS 问题
Posted
技术标签:
【中文标题】AngularJS：CORS 问题【英文标题】：AngularJS: CORS issue 【发布时间】：2017-11-25 05:13:14 【问题描述】：我在 angularjs 中使用 http 依赖项并为 CORS 设置标头，但仍然出现以下错误。请浏览console.log，您将看到以下错误。
XMLHttpRequest 无法加载 https://blockchain.info/tobtc?currency=INR&value=1000&cors=true。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://127.0.0.1:8080' 因此不允许访问。
如果你通过这个 URL，你会知道它允许 CORS https://blockchain.info/api/exchange_rates_api
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type = "button" id ="btcButton" value = "Convert" ng-click= "currencytoBtc()" />
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http,$q)
$scope.currencytoBtc = function()
var a = $scope.currency;
var b = $scope.currencyInput;
console.log(a);
console.log(b);
$http(method: 'GET', url: 'https://blockchain.info/tobtc?currency=INR&value=1000&cors=true',
headers:
'Access-Control-Allow-Origin': '*',
'Content-Type': 'text/plain;charset=UTF-8',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With'
)
.then(function(d) console.log( "yay",d ); )
.catch(function(d) console.log( "nope" ); );
);
</script>
</body>
</html>
【问题讨论】：
服务器不允许您访问它的资源...顺便说一下，将这些访问控制 response 标头添加到 request 将只有 确保 必须进行预检 - 从您的 request 中删除 response 标头将是一个开始 您需要在服务器端设置标题。不是客户端 查看来自https://blockchain.info/tobtc?currency=INR&value=1000 的响应看起来他们不发送 CORS 标头，因为他们不希望您“借用”他们的资源 - 不确定您从哪里得到添加 @ 的想法987654327@请求参数，但是什么也没做
如果你通过这个网址，你就会知道blockchain.info/api/exchange_rates_api
【参考方案1】：
Overcoming same-origin policy restrictions with
JSONP
Using JSONP is a trick that allows fetching data by passing the same-origin policy
restrictions. It relies on the fact that browsers can freely pull javascript from foreign
servers by using the <script> tag.
JSONP calls don't trigger XHR requests but instead generate a <script> tag whose
source points to an external resource. As soon as a generated script tag appears in the
DOM a browser performs its duty and calls the server. The server pads the response
with a function invocation (thus the "padding" in the name of JSONP technique) in
the context of our web application.
Let's examine a sample JSONP request and response to see how it works in practice.
First of all we need to invoke a JSONP request:
$http
.jsonp('http://angularjs.org/greet.php?callback=JSON_CALLBACK',
params:
name:'World'
).success(function (data)
$scope.greeting = data;
);
Upon invoking the $http.jsonp method AngularJS will dynamically create a new
<script> DOM element like:
<script type="text/javascript" src="http://angularjs.org/greet.
php?callback=angular.callbacks._k&name=World"></script>
Chapter 3
[ 81 ]
As soon as this script tag is attached to the DOM the browser will request the URL
specified in the src attribute. The response, upon arrival, will have a body following
a pattern like:
angular.callbacks._k ("name":"World","salutation":"Hello","greeting":
"Hello World!");
A JSONP response looks like a regular JavaScript function call and in fact this exactly
what it is. AngularJS generated the angular.callbacks._k function behind the
scenes. This function, when invoked, will trigger a success callback invocation. The
URL supplied to the $http.jsonp function call must contain the JSON_CALLBACK
request parameter. AngularJS will turn this string into a dynamically generated
function name.
JSONP callback names generated by AngularJS will have a form
of angular.callbacks._[variable]. Make sure that your
back-end can accept callback names containing dots.
JSONP limitations
JSONP is a smart and useful work-around for the same-origin policy restrictions but
it has several limitations. Firstly, we should only GET HTTP requests can be issued
using the JSONP technique. Error handling is also very problematic, since browsers
won't expose HTTP response status from the <script> tag back to JavaScript. In
practice it means that it is rather difficult to reliably report the HTTP status errors
and invoke error callbacks.
JSONP also exposes our web application to several security threats. Apart from
the well-known XSS attack, probably the biggest issue is that a server can generate
any arbitrary JavaScript in the JSONP response. This JavaScript will be loaded
to a browser and executed in the context of a user's session. A server configured
in a malicious way could execute undesired scripts causing different damages,
ranging from simply breaking a page to stealing sensitive data. As such, we should
be really careful while selecting services targeted by JSONP request and only use
trusted servers.
【讨论】：
以上是关于AngularJS：CORS 问题的主要内容，如果未能解决你的问题，请参考以下文章