node跨域

最新推荐文章于 2024-05-07 00:00:00 发布

Jeffery Feng

最新推荐文章于 2024-05-07 00:00:00 发布

阅读量348

点赞数

分类专栏： NodeJs 文章标签：前端 javascript json node

本文链接：https://blog.csdn.net/weixin_45752063/article/details/122861361

版权

NodeJs 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jsonp实现跨域

jsonp是后端实现的，前端需要配合

jsonp 不是ajax请求,是利用浏览器端请求了一个js不跨域的特性

代码：

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getData (data){
            //data 是后端传过来的数据
            console.log(data)
        }
    </script>
    <script src="http://localhost:8082/api/data?cd=getData"></script>
</body>
</html>

后端代码（nodejs）：

const http = require('http');
const url = require('url');

const server = http.createServer( ( request ,response ) => {
    let urlstr = request.url;
    let urlobj = url.parse(urlstr,true);
    console.log(urlobj)
    switch (urlobj.pathname) {
        case '/api/data':
            // response.write('Hello');
            // response.write('console.log("213213")');
            //response.write(`getData("holle")`);
            //后端直接掉用前端定义好的方法，并传入要给前端的数据
            response.write(`${urlobj.query.cd}("holle")`);
            break;
    
        default:
            response.write('page not found.')
            break;
    }
    response.end();
});

server.listen(8082, () => {
    console.log('localhost:8082')
});

CORS

jsonp是后端实现的

代码：

后端代码：

const http = require('http');
const url = require('url');

const server = http.createServer( ( request ,response ) => {
    let urlstr = request.url;
    let urlobj = url.parse(urlstr,true);
    console.log(urlobj)
    switch (urlobj.pathname) {
        case '/api/data':
            response.writeHead(200,{
                'content-type':'application/json',
                'Access-Control-Allow-Origin':'*' // 后端响应头部加'Access-Control-Allow-Origin':'*' 就行了
            });
            response.write(`{"ret":true,"data":"hello"}`)
            break;
    
        default:
            response.write('page not found.')
            break;
    }
    response.end();
});

server.listen(8082, () => {
    console.log('localhost:8082')
});

跨域（通过代理）

使用中间件（“http-proxy-middleware”）;

代码

const http = require('http');
const url = require('url');
const {createProxyMiddleware} = require('http-proxy-middleware')

const server = http.createServer( ( request, response ) => {
const urlStr = request.url;
if ( /\/api/.test(urlStr) ) {
    console.log(urlStr)
    const proxy = createProxyMiddleware('/api',{
        target: 'https://photo.home.163.com', 
        changeOrigin: true,
        // pathRewrite: {
        //     '^/api': ''
        //   },
    });
    //https://photo.home.163.com/api/designer/pc/home/index/word
    proxy(request,response )
}
else if ( /\/ajax/.test(urlStr) ) {
    console.log('ajax',urlStr)
    const proxy1 = createProxyMiddleware('/ajax',{
        target: 'https://weibo.com', 
        changeOrigin: true,
        pathRewrite: {
            '^/ajax': ''
          },
    });
    //https://weibo.com/ajax/statuses/mymblog?uid=1655444627&page=1&feature=0
    proxy1(request,response )
}
else{
    console.log('err')
}
});

server.listen( 8082, () => {
    console.log("localhost:8082")
})

Jeffery Feng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node跨域

jsonp实现跨域jsonp 不是ajax请求,是利用浏览器端请求了一个js不跨域的特性代码：前端代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
复制链接

扫一扫

专栏目录