老大让我搞一个前后端分离方案,我就想到了用nginx加载静态html资源,动态url请求转发到nodejs处理,完事后发现nodejs可以拿到本地的json文件但是无法输出到浏览器,而且第一次是成功了的,过了一段时间再来跑一遍就发现浏览器无法跨域拿到文件了,搞不懂以前可以怎么现在不可以了???
我的html代码:
<!DOCTYPE html>
<html>
<head>
<title>前后端分离测试</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/index_2.css">
</head>
<body>
<img id="img" src="img/1.jpg">
<script type="text/javascript" src='js/jquery.min.js'></script>
<script>
var host = 'http://localhost:8000';
$('#img').click(function(){
$.ajax({
url : host + "/src/word.json",
type : 'post',
data : {},
dataType : 'json',
success : function(res){
var res = JSON.stringify(res)
$('body').append('<span>成功获取数据!'+res+'</span>')
}
})
})
</script>
</body>
</html>
我的nginx配置:
server {
listen 8000;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root "D:/Program Files/nodejs/app/qianHouDuanFenLi";
index index.html index.htm;
expires -1;
}
location ~/src/.* {
proxy_pass http://127.0.0.1:3000;
}
ajax请求url为8000端口的资源,nginx收到请求后转发现符合/src/规则便转发请求到3000端口,这时候就交给nodejs处理,node代码如下:
var http = require('http');
var url = require('url');
var router = require('./router')
http.createServer(function(req,res){
if(req.url !== '/favicon.ico'){
var pathname = url.parse(req.url).pathname;
pathname = pathname.replace(/\//,'');
optname = pathname.split('/')[0];
filename = pathname.split('/')[1];
router[optname](res,filename);
}
}).listen(3000)
console.log(222)
//读取本地文件
var fs = require('fs');
module.exports = {
read_file : function(path,cb){
fs.readFile(path,function(err,data){
if(err)
console.log(err);
else
cb(data);
console.log(data);
})
console.log('读取完毕');
}
}
//输出到浏览器
var readData = require('./readData');
function getReacall(res){
function recall(data){
res.writeHead(200,{"Content-Type":"text/html"});
res.write(data);
res.end('');
}
return recall;
}
module.exports = {
src : function(res,filename){
var recall = getReacall(res);
readData.read_file('../src/'+filename,recall);
}
}
最后控制台可以输出json文件,但是到浏览器上就报这个错:
这要怎么解决?不想用jsonp也不想用设置请求头有办法解决吗?第一次提问求大神解答!
巴扎黑2017-04-11 10:52:29
不同域吧
方法一:
res.header("Access-Control-Allow-Origin", "*");
方法二:
接口跟html在同一个路径
e.g.
var host = 'http://127.0.0.1:8000';