跨域问题解决方案分析

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