解决跨域的方式

1. cors

  1. 后端设置允许跨域的请求头

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

    2. jsonp

  2. 利用script标签

  3. 只能请求get请求

    3. vue项目中可使用代理服务器

  4. 服务器与服务器之间不使用ajax，也就不会涉及到跨域

    简单方法：

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

vue.config.js

  1. const { defineConfig } = require('@vue/cli-service')
  2. module.exports = defineConfig({
  3.   devServer:{
  4.     proxy:"http://localhost:8000"
  5.   }
  6. })

此时发送请求时，不需要带上主机名与端口号

  1. axios({
  2.   method:"get",
  3.   url:"/student"
  4. }).then(res=>{
  5.   console.log(res)
  6. },err=>{
  7.   console.log(err)
  8. })

完美方法：

  • 可以配置多个服务器
  • 控制是否走代理
    1. devServer:{
    2. proxy:{
    3.   "server1":{  // 控制走那台服务器
    4.     target:"http://localhost:8000", //目标服务器
    5.       pathRewrite:{"^/server1":""},  // 重写路径，将开头的serve1去掉
    6.         ws:true,   // 支持websocket
    7.           changeOrigin:true   //是否欺骗服务器，客户端地址
    8.   },
    9.     "server2":{
    10.       target:"http://localhost:9000", //目标服务器
    11.         pathRewrite:{"^/server2":""},  // 重写路径，将开头的serve1去掉
    12.           ws:true,   // 支持websocket
    13.             changeOrigin:true   //是否欺骗服务器，客户端地址
    14.     }
    15. }
    16. }

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

  1. axios({
  2.   method:"get",
  3.   url:"/server2/server"
  4. }).then(res=>{
  5.   console.log(res)
  6. },err=>{
  7.   console.log(err)
  8. })