允许交叉原点-铁ajax-聚合物 [英] Allow cross origin - iron-ajax - Polymer

问题描述

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扩展名尝试了上述方法，并且有效.但是如果没有它，它将无法正常工作.

I tried the above using CORS extension in chrome, and it worked. But without it, it doesn't work.

下面是start_server.js文件

Below is the start_server.js file

/**
 * @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;
}

推荐答案

好的，所以最终解决了该问题.我将解释到底需要做什么.

Ok, so finally the issue is resolved. I'll explain as to what exactly needs to be done.

首先，如以上注释中所述，需要对将请求发送到的服务器进行更改.就我而言，它是一个Apache Tomcat服务器.因此，我对web.xml文件进行了以下更改，现在一切正常. 请注意，在下面的代码中，允许访问任何其他域.但是，将其仅限于您自己的域(受信任的域)是一种安全的做法.因此，您可以指定自己的域来代替*.

First of all, as mentioned in the above comments, the changes need to be made to the server to which you are sending the request. In my case, it was an Apache Tomcat Server. So, I made the following changes to the web.xml file and everything is working fine now. Please note that in the below code, the access is allowed to any other domain. However, it's a safe practice to restrict it only to your own domains (trusted ones). So instead of an * you can specify your own domain.

 <!-- Enabled CORS (Start) -->
    <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
        <init-param>
            <param-name>cors.allowed.origins</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowed.methods</param-name>
            <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowed.headers</param-name>
            <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposed.headers</param-name>
            <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
        </init-param>
        <init-param>
            <param-name>cors.support.credentials</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>cors.preflight.maxage</param-name>
            <param-value>10</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!-- Enabled CORS (END) -->

这篇关于允许交叉原点-铁ajax-聚合物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！