小白在遇到跨域问题时的分析与解决方案

小白在遇到跨域问题时的分析与解决方案

技术杂谈小彩虹2021-07-14 20:56:1240A+A-

1.个人疑惑

在第一次面对跨域问题时,作为技术小白的我,看到网上大佬们的解决方案后是一脸懵逼的,但随着深入的了解以及查阅webpack的配置文档资料,对proxy代理方式如何解决跨域问题有了初步的理解和思路,以下为个人分析思路。

2.跨域是如何产生的?

服务端:http://localhost:8080

客户端:http://localhost:3000

个人看法:

跨域的产生原因在于服务端和客户端分别在不同服务器上,而当我们想通过客户端去请求服务端的内容时,受到浏览器同源策略因素(错误描述已修正),造成只能接收与服务端相同地址下的请求,按以上举例也就是只能接收8080端口下的请求,拒绝接收3000端口下的请求。

3.跨域的解决方法

从文档以及大佬文章中学到了跨域的以下解决思路

第一种:假设server为express搭建,则使用express中间件 去开放接收所有请求端口和请求头的地址,从而实现解决跨域问题,但这种方法会存在很多问题,并不推荐使用。

let app = express(); 
app.use((req,res,next)=>{
     res.append('Access-Control-Allow-Origin',"*")
     res.append('ACcess-Control-Allow-headers',"*")
     next()
     })

第二种:使用webpack的devServer.proxy配置

在Vue2.6版本以及2.6版本以前,都是由webpack来打包的,所以在使用Vue框架做前端页面时,为了提高开发效率,前端在开发环境下临时使用proxy代理方法解决跨域问题是非常方便的。

解决方案:

在Vue项目根目录下创建vue.config.js配置文件

module.exports = {
	devServer:{
		proxy:{
			'/api':{
                //访问http://localhost:8080/api的请求会通过target指向到
                //http://localhost:3000/api
				target:"http://localhost:3000",
                //通过路径重写将/api替换为空
                pathRewrite:{
                	'^/api':""
                }
			}
		}
	}
}
proxy代理解决跨域方案底层知识:涉及http-proxy-middleware

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们