vue前端设置跨域操作

---

前言

记录VUE+Springboot项目请求跨域操作要点，在学习过程中不断补充。

一、跨域问题产生

1、当前网页URl与请求的URL地址不同域名。
2、当前网页URl与请求的URL相同域名，不同端口。
3、当前网页URl与请求的URL不同协议。
即域名、端口和协议必须一样，不然就属于跨域请求

具体内部技术原因待学习，看了一些仍旧不太了解。
跨域 + devServer.proxy

二、傻瓜式解决

1.前端操作

使用代理服务器
（1）vue.config.js
在项目根目录下（与src文件夹同级）创建vue.config.js文件来修改默认的配置：

module.exports = {
  devServer: {
    proxy: {
      //名字可以自定义，这里我用的是api
      '/api': {
        target: 'http://127.0.0.1/',//设置你调用的接口域名和端口号（目标IP：端口）
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

（2）main.js

axios.defaults.baseURL = '/api'; //调用axios时前端加上默认路由/api

（3）调用示例

this.axios.post('/php/select.php').then((response) => {
}).catch((err) => {
})

2.后端设置

springboot解决CORS 跨域问题，options请求出现403
请求是跨域，所以会先发一个options看看支不支持跨域，如果服务器支持跨域才会发原来的请求。
将后端的Controller类上加一个注解

@CrossOrigin(origins = "http://127.0.0.1:8080")
//origins ="允许跨域访问的协议+ip+端口"
//如果想设置所有地址都可以跨域设置成origins ="*"

中间有个细节就是本地测试的时候前端网址如果ip是localhost的话，后端注解origins的值必须是“localhost”。

疑问：为什么我之前只是后端设置跨域，前端修改请求头，并没有使用代理服务器也可以正常使用？详情代码为之前的vue
D:\Program\WebStormProjects\VueDemo(request+header)