vue项目跨域问题完全解决

• 跨域简单来说就是当前页面的url地址与请求的url地址不一致就会造成跨域

• 解决跨域问题常用有两种解决方案

  • JSONP： 利用HTML中的script的src属性可以跨域的特地， 在跨域脚本中直接通过回调函数的方式获取数据
  • CORS： 在服务器端设置HTTP响应头中的Access-Control-Allow-Origin值来解决跨域限制
  • 但是这两种方案都需要依赖后端的特殊处理

• 前端独立解决跨域问题

  • 代理
  • 这里简单的描述一下代理的原理
  • 首先分配三个角色 浏览器； 目标服务器； 代理服务器；
  • 浏览器直接向目标服务器发送请求, 此时就会出现跨域问题
  • 浏览器向代理服务器发送请求, 代理服务器再向目标服务器发送请求, 目标服务器接收到请求后将结果返回给代理服务器, 代理服务器再将结果返回给浏览器, 这个过程就是代理

• vue项目中处理跨域的具体操作

• 在项目根目录中的 vue.config.js文件中设置 devServer

devServer: {
    host: 'localhost',
    port: 8080,
    hot: true,  // 热重载
    open: false, // 自动打开浏览器
    overlay: {
        warning: false,
        error: true
    },
    disableHostCheck: true,
    proxy: {
        "/api": {
        target: "请求的域名",
        changeOrigin: true,  // 必须为true
        secure: false
        // pathRewrite: {  // 重写属性
        // 	'^/doutool/index.php': '/'
        // }
    }

    // proxy中的对象代码的意思是, 请求路径中如果含有 /api 的请求域名替换为 target 字段
    // pathRewrite 的作用为跨域之后再使用路径重写为 pathRewrite, 也就是 "/doutool/index.php" 重写为 "/" 注意"/" 不能写为 "", 一般来说不需要设置
    }
}

• 注意: 在设置了devServer后如果跨域问题还是存在, 则检查以下细节
• 请求不能写完整的请求域名, 只需要写路径部分即可

// 即是
// 比如完整的请求为
this.$axios.post("http://123.123.31.1/test/index.php")
// 要写成
this.$axios.post("/test/index.php")