我正在尝试从HP Alm的REST API中获取一些数据.它适用于小卷曲脚本 - 我得到了我的数据.
现在使用JavaScript,fetch和ES6(或多或少)似乎是一个更大的问题.我一直收到此错误消息:
无法加载Fetch API.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此,不允许来源" http://127.0.0.1:3000 "访问.响应具有HTTP状态代码501.如果不透明响应满足您的需要,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.
我知道这是因为我试图从我的localhost中获取该数据,解决方案应该使用CORS.现在我以为我确实这样做了,但不管怎么说它要么忽略我在标题中写的内容,要么问题是别的什么？
那么,是否存在实施问题？我做错了吗？遗憾的是我无法检查服务器日志.我真的有点卡在这里.
function performSignIn() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');
headers.append('GET', 'POST', 'OPTIONS');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch(sign_in, {
//mode: 'no-cors',
credentials: 'include',
method: 'POST',
headers: headers
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log('Authorization failed : ' + error.message));
}
我正在使用Chrome.我也尝试使用Chrome CORS插件,但后来我收到另一条错误消息:
当请求的凭据模式为"include"时,响应中"Access-Control-Allow-Origin"标头的值不能是通配符"*".因此,不允许来源" http://127.0.0.1:3000 "访问.XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.
对于这个项目,我只是学习和练习Angular 2.我没有服务器端,并且正在向barchart ondemand api发出API请求 .
我想知道是否有可能绕过cors问题.我对这一切仍然相当新,所以非常感谢宝贝步骤说明!我正在使用http://localhost:8080.
错误信息:( api键已注释掉)
XMLHttpRequest cannot load http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&symbol=GOOG&type=daily&startDate=20150311000000. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
StockInformationService:
import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
@Injectable()
export class StockInformationService {
private apiRoot = "http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&";
constructor (private _http: Http) {}
getData(symbol: string): Observable<any> {
// Tried adding headers with no luck …我想在 js+jquery 中创建图片编辑器。第一步，我要求用户提供图片网址。但是当我尝试在 JS 中加载图像数据（生成 base64 图像 uri）时遇到了问题。我在控制台中收到错误：… has beeb blocked by CORS policy: Access-Control-Allow-Origin …. 但我想知道为什么？如果在 html 文件中我创建例如（图像热链接）：
<img src="https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg" />
浏览器加载图像没有任何 CORS 问题！这是我的 JS 代码，对于相同的图像抛出 CORS 问题：
function downloadFile(url) {
console.log({url});
var img = new Image();
img.onload = function() {
console.log('ok');
// never execute because cors error
// … make base64 uri with image data needed for further processing
};
img.crossOrigin = "Anonymous";
img.src = url;
}
所以问题是 - 如何强制 JS 加载图像（作为 html-tag 加载它）并将其转换为 base64 url …
我在package.json中添加了proxy，效果很好，但是在npm run build之后，CORS问题再次浮出水面，有人知道在React中npm run build之后如何处理CORS问题。
我试图使用各种方法在axios请求中添加标头。但是，我未能在axios请求中添加'Access-Control-Allow-Origin'：'*'。我的代码如下：
package.json
"proxy": {
"*":{ "target" : "http://myurl"}
}
GetData.js
axios.defaults.baseURL = 'http://myurl';
axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
axios.get(serviceUrl, onSuccess, onFailure)
.then(resp => {
let result = resp.data;
onSuccess(result);
})
.catch(error => {
if(onFailure) {
return onFailure(error);
}
})
}
注意：它已从服务器端启用，目前仍无法使用。目前，我无法从服务器端更改代码，我的工作仅限于客户端。
我正在开发一个反应应用程序。我在哪里请求 AXIOS 的 API。但是当我运行 NPM START 在本地主机中测试我的应用程序时，我收到 CORS 错误。这是错误 Access to XMLHttpRequest at 'https://********.com/trx_status.php' from origin ' http://localhost:3000 ' 已被 CORS 策略阻止：请求标头字段私钥预检响应中的 Access-Control-Allow-Headers 不允许。
我是反应新手。请告诉我如何解决这个问题。谢谢...
我正在开发一个MEAN堆栈Web应用程序,我想使用ng2-file-upload上传文件.这是我的Angular 2代码.
classroom.component.html
<input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />
<button type="button" class="btn btn-success btn-s"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button><br />
classroom.component.ts
uploader:FileUploader = new FileUploader({url: "http://localhost:3000/api/material/create-material"});
在server.js中
app.use(cors());
app.use('/api',api);
app.use('/api/material',material);
并在material.js
var storage = multer.diskStorage({ //multers disk storage settings
destination: function (req, file, cb) {
cb(null, './uploads/');
},
filename: function (req, file, cb) {
var datetimestamp = Date.now();
cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]);
}
});
var upload = multer({ //multer …总而言之,我正在使用像dicom文件的api这样的观众,称为基石,为此,我连接到dc4chee的WADO服务以获取dicom,dcm4chee运行端口8080,我的节点上的应用程序使用端口3000,所以我试图显示浏览器的dicom.
https://www.npmjs.com/package/cornerstone-wado-image-loader
这是浏览器显示的错误
XMLHttpRequest can not load http: // localhost: 8080 / wado? RequestType = WADO & studyUID = 1.2.840.113704.1.111.5 ... 26513.429 & contentType = application% 2Fdicom & transferSyntax = 1.2.840.10008.1.2. In 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http: // localhost: 3000' is therefore not allowed access.
在指定的文档中
请注意,Web服务器必须支持跨源资源共享,否则图像将无法加载.如果您无法在Web服务器上启用CORS,而您正在加载DICOM P10实例,则可以使用反向代理.这是一个基于http-proxy的简单Node.js,它添加了你可能觉得有用的CORS头文件.
并显示此示例代码,但我使用快递,此代码不起作用
Var http = require ('http'),
HttpProxy = require ('http-proxy');
Var proxy = httpProxy.createProxyServer ({target: 'http: // localhost: 8042'}) .listen (8000);
Proxy.on ('proxyRes', function (proxyReq, req, res, …我正在使用fetch API从其他API获取数据这是我的代码:
var result = fetch(ip, {
method: 'get',
}).then(response => response.json())
.then(data => {
country = data.country_name;
let lat = data.latitude;
let lon = data.longitude;
//fetch weather api with the user country
return fetch(`https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/${lat},${lon}`);
})
.then(response => response.json())
.then(data => {
// access the data of the weather api
console.log(JSON.stringify(data))
})
.catch(error => console.log('Request failed', error));
但我在控制台中遇到错误:
Fetch API cannot load https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/52.3824,4.8995. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If …我已经按照以下教程,以便在我的AngularJS项目中集成臭名昭着的bluimp jQuery文件上传器.
经过一些研究,我发现在options数组中,在jquery.fileuploader.js文件中,有一个名为autoUpload的选项,当设置为true时会自动上传文件.我试图禁用它(假,未定义),但很快我就知道这导致上传根本不起作用,甚至在表单提交上也没有.
我需要手动触发上传,比如在另一个回调中,或者通过点击事件触发.可以这样做吗？
码:
app.directive("fileupload", function() {
return {
restrict: "A",
scope: {
done: "&",
progress: "&",
fail: "&",
uploadurl: "=",
customdata: "&"
},
link: function(scope, elem, attrs) {
var uploadOptions;
uploadOptions = {
url: scope.uploadurl,
dataType: "json"
};
if (scope.done) {
uploadOptions.done = function(e, data) {
return scope.$apply(function() {
return scope.done({
e: e,
data: data
});
});
};
}
if (scope.fail) {
uploadOptions.fail = function(e, data) {
return scope.$apply(function() {
return scope.fail({
e: e,
data: data …我在后端使用 nodejs express 作为我的 API。我想知道如何在redirect方法上启用 CORS 。
以下是我的快速重定向代码：
res.redirect(redirectUrl);
当客户端向上述 API 发送请求时，它会将请求重定向到 as3但我收到以下错误：
Access to XMLHttpRequest at 'https://s3-ap-southeast-
2.amazonaws.com/index.html' (redirected from
'http://localhost:9090/v0/api') from origin 'http://localhost:9090' has
been blocked by CORS policy: Response to preflight request doesn't pass
access control check: No 'Access-Control-Allow-Origin' header is present on
the requested resource.
前端正在运行，http://localhost:9090并且前端域已添加到 s3 存储桶中的 CORS 上。如果我https://s3-ap-southeast-2.amazonaws.com/index.html直接从浏览器发送请求，它工作正常。所以我认为问题出在nodejs express redirect方法上。如何为重定向启用 CORS？
我知道如何启用，CORS但我的问题与redirect. 我怎样才能使重定向工作？