vue 跨域 怎么办？

vue-配置跨域

在前端开发中 最讨厌的就是服务器 莫名其妙挂了，

其次就是我怎么跨域了。。。。

好的， 现在问题出现了， 咱们最关心的是怎么去解决。

通常跨域有多种解决方式

ps：

1、jsonp 大部分html标签的src属性里面的链接都是可以跨域的 （有些黑客可能会依靠这个 攻击你的程序）

2、说到里 这个同源政策也就正对浏览器比较严格， 其他如: 服务器与服务器之间就是不存在跨域的 （可以用node坐中间层）

3、当项目发布之后大多 都是使用nginx

而这次要讲的， 是vue脚手架生成的项目结构直接改成支持跨域的模式

vue.config.js 查看项目根目录是否有这样一个.js文件 (没有自己建)

// vue.config.js

module.exports = {
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: { //配置跨域
      '/api': {
        target: 'http://localhost:8888/api/', //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        changOrigin: true, //允许跨域
        pathRewrite：{  //本身的接口地址没有‘/api’,这种通用前缀，所以要rewrite，如果本身有则去掉                 '^/api':' '    //使用'^/api':' '   可以把接口中的虚拟/api去掉。                                   这项
//本身接口中没有/api，使用/api和'^/api':' '的作用：既能拥有正确的跨域标识，又能在请求接口的时候去掉/api。
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  }
}

配置了这个难道就能解决我的跨域问题了吗？ （注意vue.config.js文件不会热更新 ---- 就是叫你改了 要自己重新跑项目）

额 怎么说 算是解决的差不多了吧

注意

没配置代理前

// dome 简略 

// main.js
Vue.prototype.$http=axios
Vue.config.productionTip = false

// 页面的请求
const data = this.$http.post('http://localhost:8888/api')  // 请求地址可见参数 'http://localhost:8888/api/'

以上请求由于不在同一个端口 所以请求会跨域

配置vue.config.js 之后

// dome 简略 

// main.js
Vue.prototype.$http=axios
Vue.config.productionTip = false

// 页面的请求
const data = this.$http.post('/api')  // 请求地址可见参数 'http://localhost:8888/api/'
// 请求地址参数 会发送改变
// 对比没配置之前
// const data = this.$http.post('http://localhost:8888/api')  // 请求地址可见参数 

这个时候请求就不会跨域了

聪明的小伙伴可能就会有新的问题 （我项目api只有一台服务器 跑一个端口貌似没问题）

我的项目不值一个服务器， 不只有一个ip 不只有一个 域 不只有一个端口 啊?!

module.exports = {
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: { //配置跨域
      '/api': {
        target: 'http://localhost:8888/api/', //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      },
      '/dwp': {
        target: 'http://localhost:8881/dwp/', //这里后台的地址模拟的;应该填写你们真实的后台接口  8881 模拟多个
        ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/dwp': '' //请求的时候使用这个api就可以
        }
      }
    }
  }
}