Jsonp,CORS,http proxy反向代理解决跨域问题

    xiaoxiao2022-12-09  49

    http反向代理解决跨域问题

    我们通常在以前后端分离的方式开发项目的时候,会遇到跨域的问题;常见的解决跨域的问题的方法有三种:

    jsonpCORShttp proxy(反向代理)

    1.Jsonp:

    jsonp方式是利用script标签可以访问JS脚本,返回函数的调用 的字符串; 但是这种方的缺点是: 只能用get方式不能用其他的方式.

    2.CORS:

    cors方式是需要后端的朋友配合,在被请求的服务器上安装cors并使用,例如:

    // 1.安装cors: // npm i cors -S // 服务器代码: const express = require('express') const app = express() // 加载并使用cors const cors = require('cors') app.use(cors()) app.get('/api/getUserInfo', (req, res) => { res.send({ name: '张三', age: 18 }) }) app.listen(9999, function(){ console.log('http://localhost: 9999') })

    然后浏览器再次发送请求,我们可以拿到响应的数据;通过浏览器的network可以发现Response Headers有个Access-Control-Allow-Origin: *的响应头!

    3.http proxy:

    http proxy方式就是我们常说的反向代理,利用webpack打包工具中的dev-server将所有ajax请求发给devServer服务器,再由devServer服务器做一次转发,发送给数据接口服务器;由于ajax请求是发给devServer服务器的,所以不存在跨域,而devServer由于是用node平台发送的http请求,自然也涉及不到跨域问题! 原理如下图所示: 前端需要配置devServer的proxy功能,在webpack.dev.js中进行配置:

    devServer: { open: true, hot: true, compress; true, port: 3000, proxy: { '/api': 'http://localhot:9999', // 前端请求'/api'时,会将请求转发给http://localhost:9999 } }

    说明: 前端请求/api的url时候,webpack-dev-server会将请求转发给http: //localhost:9999,此时如果请求地址为http://localhost:9999/api/getUserInfo,请求路径url只需要直接写/api/getUserInfo即可; 重新启动项目,然后发现network中之前的请求路径http://localhost:9999/api/getUserInfo,现在改为http://localhost:3000/api/getUserInfo,代表是devServer转发成功!

    如果路径里面没有/api这样的路径的话,我们依旧可以这样写,但是需要修改devServer.proxy配置: devServer: { open: true, hot: true, compress; true, port: 3000, proxy: { '/api': { target: 'http;//localhost:9999', pathRewrite: { '^/api': '' } } } }
    最新回复(0)