2.处理常见的跨域问题。

1.直接解除浏览器同源安全策略，不过这种方法只能用于我们开发环境中，方法如下：

• 1.2.复制一个浏览器快捷方式。
• 1.3.鼠标移到桌面谷歌快捷方式–>点击右键–>点击属性–>在目标栏加 --disable-web-security --user-data-dir=D:\MyChromeDevUserData。
  • ①"D:\MyChromeDevUserData"：随便新建的一个文件夹名称，存储个人私有的浏览器运行文件。注意备份好自己的密码与书签。
  • ②注意 --disable-web-security --user-data-dir=D:\MyChromeDevUserData。前有一个空格。
• 1.4.重新启动浏览器出现下面这行关于 --disable-web-security的提示文字即可
  • ①Chrome 浏览器亲测适用。
  • ②360 浏览器亲测适用。
    
    操作图例：
    

2.vue 脚手架配置代理可以解决跨域问题：

• 2-1.在 vue.config.js 中添加如下配置：
  • ①优点：配置简单，请求资源时直接发给前端（8080）即可。
  • ②缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  • ③工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源即public文件夹下的东西）。

devServer:{
  proxy:"http://localhost:5000"
}

• 2-2.vue.config.js配置具体代理规则：
  • ①优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
  • ②缺点：配置略微繁琐，请求资源时必须加前缀。示例请求地址：“http://localhost:8080/api1/students”

module.exports = {
 devServer: {
   proxy: {
     '/api1': {// 匹配所有以 '/api1'开头的请求路径
       target: 'http://localhost:5000',// 代理目标的基础路径
       changeOrigin: true, // 服务器收到的请求头中的host为：localhost:5000（默认true）
       pathRewrite: { '^/api1': '' }
     },
     '/api2': {// 匹配所有以 '/api2'开头的请求路径
       target: 'http://localhost:5001',// 代理目标的基础路径
       changeOrigin: false, // 服务器收到的请求头中的host为：localhost:8080
       pathRewrite: { '^/api2': '' }
     }
   }
 }
}