nodeJS解决跨域(同源策略)的简单三种方法(jsonp,cors,服务器代理)

互联网 2021/10/14 11:14:10

产生跨域请求问题的原因 因为在浏览器中有一个同源策略,这是浏览器最基本的安全功能,但是只在浏览器中有,在服务器中没有这个问题。 同源就是指:协议,域名,端口号都相同,任意一个不满足,就触发了同源策略,我们把触发了同源策略的请求叫做跨域请求。jsonp <sc…

产生跨域请求问题的原因

因为在浏览器中有一个同源策略,这是浏览器最基本的安全功能,但是只在浏览器中有,在服务器中没有这个问题。
同源就是指:协议,域名,端口号都相同,任意一个不满足,就触发了同源策略,我们把触发了同源策略的请求叫做跨域请求。

  • jsonp

     <script src="http://domain/api?name=xujie&pwd=123456&callback=jsonp""></script>
    <script>
    	//函数名与地址的cb或者callback的值一致
    	function jsonp(res){
    		console.log(res)
    	}
    </script>
    

    jsonp的使用简单且兼容性不错,但是仅限于get请求

  • CORS
    实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信,所以只需对服务器进行设置。
    1

    服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

     //在后端接口中设置
    header('Access-Control-Allow-Origin:域名');
    //当域名为*时支持所有网站都可以访问资源
    

    2
    通过下载cors包来解决(简单粗暴)
    安装代码:npm i cors -g
    用法:

    var express=require('express')
    var cors=require('cors') //导入cors包
    var app=express()
    app.use(express.static('public'))
    // app.use(cors())  //设置这个就允许所以域名跨域
    app.use('/xujie',cors(),function(req,res){
        //在参数中写入cors()就是允许自定义可跨域访问的域名
        res.json({name:8888})
    })
    
  • 代理

    通过访问我们自己的服务器,让我们自己的服务器去帮我们请求资源,再返回给我们。
    安装一个包

     npm i http-proxy-middleware -s
    

    代码写法:

    var express=require('express')
    var app=express()
    const {createProxyMiddleware} = require('http-proxy-middleware')
    app.use(express.static('public'))
    
    app.use('/xujie',createProxyMiddleware({
        target:'http://localhost:8888',
        changeOrigin:true
    }))
    app.listen(7777)
    
随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[nodeJS解决跨域(同源策略)的简单三种方法(jsonp,cors,服务器代理)]http://www.zyiz.net/tech/detail-241265.html

上一篇:nginx部署vue工程简单的配置文件

下一篇:Cesium-vue:启动失败,error in ./node_modules/cesium/Source/ThirdParty/zip.js Module parse failed: Unexp

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程