【发布时间】：2017-05-30 22:40:58
【问题描述】：
XMLHttpRequest cannot load http://abcd.com/xyz?id=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
我正在设置
<iron-ajax
id="requestRepos"
headers='{"Accept": "*/*"}'
url="http://abcd.com/xyz"
params="{{requestParams}}"
handle-as="json"
on-response="handleResponse"></iron-ajax>
我在 chrome 中使用 CORS 扩展名尝试了上述操作，并且成功了。但是没有它，它就行不通。
下面是 start_server.js 文件
/**
* @license
* Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
"use strict";
const express = require('express');
const http = require('http');
const path = require('path');
const send = require('send');
const url = require('url');
const make_app_1 = require('./make_app');
const findPort = require('find-port');
const opn = require('opn');
function applyDefaultOptions(options) {
const withDefaults = Object.assign({}, options);
Object.assign(withDefaults, {
port: options.port || 8080,
hostname: options.hostname || "localhost",
root: path.resolve(options.root || '.'),
});
return withDefaults;
}
/**
* @return {Promise} A Promise that completes when the server has started.
*/
function startServer(options) {
return new Promise((resolve, reject) => {
options = options || {};
if (options.port) {
resolve(options);
}
else {
findPort(8080, 8180, (ports) => {
options.port = ports[0];
resolve(options);
});
}
}).then((opts) => startWithPort(opts));
}
exports.startServer = startServer;
const portInUseMessage = (port) => `
ERROR: Port in use: ${port}
Please choose another port, or let an unused port be chosen automatically.
`;
function getApp(options) {
const port = options.port;
const hostname = options.hostname;
const root = options.root;
const app = express();
console.log(`Starting Polyserve...
serving on port: ${port}
from root: ${root}
`);
const polyserve = make_app_1.makeApp({
componentDir: options.componentDir,
packageName: options.packageName,
root,
});
options.packageName = polyserve.packageName;
const filePathRegex = /.*\/.+\..{1,}$/;
app.use('/components/', polyserve);
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/*', (req, res) => {
const filePath = req.path;
send(req, filePath, { root: root, })
.on('error', (error) => {
if ((error).status == 404 && !filePathRegex.test(filePath)) {
send(req, '/', { root: root }).pipe(res);
}
else {
res.statusCode = error.status || 500;
res.end(error.message);
}
})
.pipe(res);
});
return app;
}
exports.getApp = getApp;
/**
* Open the given web page URL. If no browser keyword is provided, `opn` will use
* the user's default browser.
*/
function openWebPage(url, withBrowser) {
const openOptions = {
app: withBrowser
};
opn(url, openOptions, (err) => {
if (err) {
// log error and continue
console.error(`ERROR: Problem launching "${openOptions.app || 'default web browser'}".`);
}
});
}
function startWithPort(userOptions) {
const options = applyDefaultOptions(userOptions);
const app = getApp(options);
let server = http.createServer(app);
let serverStartedResolve;
let serverStartedReject;
const serverStartedPromise = new Promise((resolve, reject) => {
serverStartedResolve = resolve;
serverStartedReject = reject;
});
server = app.listen(options.port, options.hostname, () => serverStartedResolve(server));
server.on('error', function (err) {
if (err.code === 'EADDRINUSE') {
console.error(portInUseMessage(options.port));
}
serverStartedReject(err);
});
const serverUrl = {
protocol: 'http',
hostname: options.hostname,
port: `${options.port}`,
};
const componentUrl = Object.assign({}, serverUrl);
componentUrl.pathname = `components/${options.packageName}/`;
console.log(`Files in this directory are available under the following URLs
applications: ${url.format(serverUrl)}
reusable components: ${url.format(componentUrl)}`);
if (options.open) {
let openUrl;
if (options.openPath) {
openUrl = Object.assign({}, serverUrl);
openUrl.pathname = options.openPath;
}
else {
openUrl = Object.assign({}, componentUrl);
}
if (!Array.isArray(options.browser)) {
openWebPage(url.format(openUrl));
}
else {
options.browser.forEach((browser) => {
openWebPage(url.format(openUrl), browser);
});
}
}
return serverStartedPromise;
}
【问题讨论】：
-
您是否具有更改代码的双方访问权限？客户端和服务器？
-
@Altmish-E-Azam 是的。我正在使用节点 js 服务器。
-
添加一个标题`Access-Control-Allow-Origin`并在你的
http://abcd.com/xyz中赋予价值* -
@Altmish-E-Azam 在客户端？例如; ` headers='{"Access-Control-Allow-Origin"}'`。还是在某个节点 js 配置文件中完成。我不太确定我需要在哪个文件中进行这些更改。
-
老实说，我对节点 js 没有任何想法，但如果你可以添加上面的带有值的标头，那么它可以在没有任何扩展的情况下工作。