优雅的解决跨域问题

本文使用了两种方法来解决前后端分离项目中出现的跨域问题。前端使用的是vue cli3搭配axios发送网络请求。

在后端的解决方案

一行代码就可以解决

response.setHeader("Access-Control-Allow-Origin", "*");

在前端的解决方案

即配置代理服务器的方法，由于在浏览器中我们无法实现跨域请求数据，但是从某个服务器向另一个服务器发送请求时就不会遇到这种问题，即使两个服务器的域不同。所以可以在前端本地配置一个代理服务器，也就是假的服务器，通过这个代理服务器向真正的服务器发送请求就可以了，配置方法非常简单：

1. 首先在项目的根目录下新建一个vue.config.js文件，文件名也不要随便起。下面是我的项目目录，各位根据具体情况即可，只要保证该文件在根目录下就可以了。
   

2. 文件中的内容

module.exports = {
  devServer: {
 	//本地服务的主机名，也就是你前端项目运行的服务所在的主机名
 	//一般情况下不会改变
    host: 'localhost',
    //本地服务的端口号，这个可以随便改
    //改成哪个端口本地服务就会在哪个端口运行
    //如果改的话最好挑数值比较大的，否则可能端口已经被占用
    port: 8080,
    //配置后端服务器
    proxy: {
    	//这个键值‘/api’表示请求的url中所有以‘/api’开头的
    	//都会经过代理服务器发送
    	//例如，后端服务器的接口url是‘http://localhost:8888/api/login’
    	//在axios中的请求url可以是‘/api/login’
    	//会自动和下面的target进行拼接，把原来的头部删除
    	//拼接成下面的
      '/api': {
      	//目标服务器的url头部
      	//看自己情况填写具体的值
        target: 'http://localhost:8888',
        //是否开启跨域，true表示开启，false表示关闭
        changeOrigin: true,
      }
    }
  }
}

3. 重新启动项目
   这样就在前端解决了跨域问题，这是目前开发中使用最多的方法，很简单。
   欢迎批评指正，谢谢