如何在Vue项目中解决跨域问题

跨域，它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。我们使用Ajax请求后端接口时，域名、协议、端口只要有一项不同，便会跨域。

常见解决跨域的方式

1. cors

• 由后端设置允许跨域的请求头

response.setHeader("Access-Control-Allow-Origin","*")
// KOA2
ctx.set("Access-Control-Allow-Origin","*")
ctx.set("Access-Control-Allow-Methods","OPTIONS,GET,POST,PUT,DELETE")

2. jsonp

• 利用script标签，由于script的src标签不受同源策略影响。

  • 只能请求get请求，且不安全

3. 使用代理服务器

• 原理：服务器与服务器之间不使用ajax,不会通过浏览器，也就不会涉及到跨域，比如使用Nginx等。本文讲解的在vue项目中解决跨域问题，也是使用该方式

vue项目中解决跨域

主要在vue.config.js中进行配置，也是利用webpack的代理配置解决跨域问题。

简单配置：

• 当请求的后端服务器只有一个时可以进行简单配置
• 缺点：
  • 不能配置多个服务器
  • 不能控制走不走代理，如果请求的资源，本地static中就有，就不会在请求远程服务器

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer:{
    proxy:"http://localhost:8000"  // 后端服务器地址
  }
})

• 此时在项目中发送请求时，就不需要再带上主机名与端口号

axios({
  method:"get",
  url:"/student"
}).then(res=>{
  console.log(res)
},err=>{
  console.log(err)
})

较完美的配置方案：

• 可以配置多个后端服务器
• 可以控制是否请求的本地文件，还是远程服务器

devServer:{
  proxy:{
    "server1":{  // 控制走那台服务器
      target:"http://localhost:8000", //目标服务器
        pathRewrite:{"^/server1":""},  // 重写路径，将开头的serve1去掉
          ws:true,   // 支持websocket
            changeOrigin:true   //是否欺骗服务器，客户端地址
    },
     "server2":{
       target:"http://localhost:9000", //目标服务器
         pathRewrite:{"^/server2":""},  // 重写路径，将开头的serve2去掉
           ws:true,   // 支持websocket
             changeOrigin:true   //是否欺骗服务器，客户端地址
    }
  }
}

发送请求时，需要带上标识

axios({
  method:"get",
  url:"/server2/server"  // 请求的是server2的服务器
}).then(res=>{
  console.log(res)
},err=>{
  console.log(err)
})