允許跨起源 - 鐵 - 阿賈克斯 - 聚合物

Question

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> 

我嘗試了上面使用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; 
} 

Answer 1

好了，所以最後的問題解決了。我會解釋究竟需要做什麼。

首先，如上面的評論所述，需要對發送請求的服務器進行更改。就我而言，它是一個Apache Tomcat服務器。所以，我對web.xml文件進行了以下更改，現在一切正常。 請注意，在下面的代碼中，訪問被允許到任何其他域。但是，將它限制在自己的域名（可信域名）是安全的做法。因此，您可以指定自己的域，而不是*。

<!-- 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) --> 

Answer 2

如果你與春天開機工作，你也可以定義一個全局配置WebMvcConfigurerAdapter：

`@Bean 
    public WebMvcConfigurer corsConfigurer() { 
     return new WebMvcConfigurerAdapter() { 
      @Override 
      public void addCorsMappings(CorsRegistry registry) { 
       registry.addMapping("/**").allowedOrigins("http://127.0.0.1:8081"); 
      } 
     }; 
    }