2015-06-25 119 views
0

我構建了一個基於Backbone.js的應用程序,並將其部署到heroku的鏈接(https://prototypeapp.herokuapp.com),但我面臨一個奇怪的問題: 當我在瀏覽器中請求應用程序時,與backbone.js相關的部分代碼不起作用,並且我的firefoxe瀏覽器的Web控制檯顯示以下錯誤:「跨源請求被阻止:同源策略不允許讀取遠程資源https://localhost:8080/timeline(原因:CORS請求失敗)「。儘管該應用在當地運行良好。 我已閱讀有關此問題,但沒有任何幫助我解決它。任何人都可以幫助我知道這個問題的原因,以及如何解決它? 我server.js代碼如下:跨域請求被阻止:(原因:CORS請求失敗)部署到heroku的backbone.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; 
}); 

回答

0

localhost手段,本質上, '我自己的電腦。'您正在Internet上運行Web服務器 - 而不是您的計算機 - 因此連接到url: 'https://localhost:8080/timeline'沒有任何意義。最好使用像/timeline這樣的相對網址。

+0

哦,是的,這是正確的。對不起,我沒有注意到。謝謝你這麼多@hunterloftis – evahriekes