search

Home  >  Q&A  >  body text

javascript - nginx加载本地静态文件html内ajax请求动态url转发到node拿到本地json文件后无法在浏览器端显示。

老大让我搞一个前后端分离方案,我就想到了用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也不想用设置请求头有办法解决吗?第一次提问求大神解答!

阿神阿神2783 days ago833

reply all(1)I'll reply

  • 巴扎黑

    巴扎黑2017-04-11 10:52:29

    不同域吧
    方法一:
    res.header("Access-Control-Allow-Origin", "*");
    方法二:
    接口跟html在同一个路径
    e.g.
    var host = 'http://127.0.0.1:8000';

    reply
    0
  • Cancelreply