Question

我已经构建了一个基于Backbone.js的应用程序并将其部署到链接（https://prototypeapp.herokuapp.com）的heroku但我面临一个奇怪的问题：当我在浏览器中请求应用程序时，与backbone.js相关的代码部分不起作用，我的firefoxe浏览器的Web控制台显示以下错误：＆＃34;跨源请求已阻止：同源策略禁止在https://localhost:8080/timeline读取远程资源。（原因：CORS请求失败）。＆＃34;尽管应用程序在本地运行良好。我已经读过这个问题，但没有什么能帮助我解决它。有谁能帮助我知道这个问题的原因以及如何解决它？我的server.js代码如下：

/**
* A simple API hosted under localhost:8080
*/
var express = require('express');
var app = express();

var Twit = require('twit')

var client = null;


function connectToTwitter(){
 client = new Twit({
  consumer_key:         '*******'
, consumer_secret:      '*******'
, access_token:         '*******'
, access_token_secret:  '*******'
});
}
 //get the app to connect to twitter.
 connectToTwitter();

app.set('port', (process.env.PORT || 8080));

 /** 
   * Get the account settings for the user with the id provided.
  **/
 app.get('/profile/:id', function(request, response){

 response.header('Access-Control-Allow-Origin', '*'); 

 client.get('users/show', {screen_name:request.params.id}, 
 function (err, reply) {

  if(err){
    console.log('Error: ' + err);
    response.send(404);

  }
  if(reply){
   // console.log('Reply: ' + reply);
    response.json(reply);
  }

  });
});


 /**
 * Runs a search given a query  
 **/
 app.get('/search/:query', function (request, response) {

response.header('Access-Control-Allow-Origin', '*'); 
//search term is 
var searchTerm = request.params.query;

client.get('search/tweets', { q: searchTerm, count: 20 },
function(err, reply) {

  if(err){
    console.log('Error: ' + err);
    response.send(404);

  }
  if(reply){
   // console.log('Reply: ' + reply);
    response.json(reply);
  }

  });

});

/**
 * Returns the twitter timeline for the current user 
 **/
 app.get('/timeline', function (request, response) {

  response.header('Access-Control-Allow-Origin', '*'); 
 client.get('statuses/home_timeline', { count:6 },
 function (err, reply) {

  if(err){
    console.log('Error: ' + err);
    response.send(404);

  }
  if(reply){
 //   console.log('Reply: ' + reply);
    response.json(reply);
  }

 });

});

 var allowCrossDomain = function(req, response, next) {
 response.header('Access-Control-Allow-Origin', "*");
 response.header('Access-Control-Allow-Methods', 
 'OPTIONS, GET,PUT,POST,DELETE');
 response.header('Access-Control-Allow-Headers', 'Content-Type,
 Authorization, Content-Length, X-Requested-With');

  if ('OPTIONS' == req.method) {
    response.send(200);
  }
  else {
   next();
 }
 };

 app.configure(function() {
 app.use(allowCrossDomain);
//Parses the JSON object given in the body request
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static('client'));
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));

 });

//Start server
app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
});

我的时间表收集如下：

 define(['backbone', 'app/model/Tweet'], function(Backbone, Tweet) {

var com = com || {};
com.apress = com.apress || {};
com.apress.collection = com.apress.collection || {};

 com.apress.collection.Timeline = Backbone.Collection.extend({

//the model that this collection uses
model: Tweet, 
//the server side url to connect to for the collection
url: 'https://localhost:8080/timeline',

initialize: function(options){
    //anything to be defined on construction goes here
},



});

return com.apress.collection.Timeline; 
});

Answer 1

localhost本质上意味着“我自己的电脑”。您正在Internet上运行Web服务器 - 而不是您的计算机 - 因此连接到url: 'https://localhost:8080/timeline'没有意义。最好使用像/timeline这样的相对网址。

跨部门请求被阻止:(原因：CORS请求失败）在部署到heroku的backbone.js应用程序中

1 个答案: