vue解决跨域问题

27次阅读

共计 754 个字符,预计需要花费 2 分钟才能阅读完成。

开发模式
要知道,跨域这个行为是浏览器禁止的,但是服务端并不禁止。使用 proxyTable 的原理就是将域名发送给本地的服务器,再由本地的服务器去请求真正的服务器。

打开 config/index.js,修改 dev 里的 proxyTable

proxyTable:{
    '/': {
            target: 'http://www.xxx.cn/api', // 你要访问的服务器域名
            changeOrigin: true, // 允许跨域
            pathRewrite: {'^/': ''}
        }
}

当你在别的页面请求时只要是 /,你只需要 /xx/xxx 它就会帮你处理成 http://www.xxx.cn/xx/xxx。
假如项目需要请求两个不同的域名,proxytable 在上面的基础上再增加,当请求时 /json/xx/xxx 开头的最后都会转换成 http://www.aaa.cn/xx/xxx

'/json': {
            target: 'http://www.aaa.cn/', // 你要访问的服务器域名
            changeOrigin: true, // 允许跨域
            pathRewrite: {'^/json': ''}
        }

但实际上接口是没有 json 的,这只是你用来区分请求的一个别名,这时 pathRewrite 就可以将 /json 去掉

生产环境
找到 config/pro.env.js

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://www.xxx.cn/"'
}

在 config 目录下新建 api.js 文件

const root = process.env.API_ROOT; // 在开发模式下为会调用代理
export const getList = root + '/list'

这样配置后你可以直接在组件写请求的 url 不需再判断处于哪个模式下,都可以跨域请求。

正文完
 0