我正在尝试让bit.ly API工作,但我遇到了CORS问题。我查了所有我能查到的消息来源,但问题仍然存在。
Angular2代码:
getBitLyUrl (fullUrl : string): Observable<string> {
let headers = new Headers({'Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' });
let options = new RequestOptions({ headers: headers });
let res = this._http.get('https://api-ssl.bitly.com/v3/shorten?access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl='
+ fullUrl + '&format=json', options)
.map((response: Response) => response.json());
return res;
}
Chrome网络的标头:
General:
Request URL:https://api-ssl.bitly.com/v3/shorten? access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=http://www.cyberma .net&format=json
Request Method:OPTIONS
Status Code:200 OK
Remote Address:67.199.248.20:443
Response:
Allow:GET, POST, OPTIONS
Connection:keep-alive
Content-Length:0
Content-Type:text/plain; charset=utf-8
Date:Wed, 25 Jan 2017 10:22:31 GMT
Server:nginx
Request:
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en,cs;q=0.8,sk;q=0.6,de;q=0.4
Access-Control-Request-Headers:access-control-allow-origin, x-xsrf-token
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:api-ssl.bitly.com
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
我得到这个错误:
XMLHttpRequest无法加载https://api-ssl.bitly.com/v3/shorten?access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=http://www.cyberma.net&format=json。对飞行前请求的响应未通过访问控制检查:否请求的上存在"Access Control Allow Origin"标头资源原点'http://localhost:3000因此不允许通道
如有任何帮助,我们将不胜感激!
let headers = new Headers({'Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' });
。这是一个响应标头。CORS
的设置是为了安全保护后端服务器,因此这些头必须由后端服务器设置作为响应。如果你不控制服务器,除非他们批准你的域,否则无法从跨来源访问它。
OPTIONS
请求由浏览器设置,而不是角度设置。在这里阅读更多abbout it。
跨来源资源共享标准通过添加新的HTTP标头来工作,该标头允许服务器描述被允许使用网络浏览器读取该信息。此外,对于可能对用户数据(尤其是GET以外的HTTP方法或POST使用某些MIME类型)。规范规定浏览器"预处理"请求,从具有HTTP OPTIONS请求标头的服务器,然后从服务器"批准",发送实际请求HTTP请求方法。服务器还可以通知客户端"凭据"(包括Cookie和HTTP身份验证数据)应与请求一起发送。
只需从get函数中删除标题和选项参数