设置 nuxt 的请求跨域代理

香菊网 发表于: 2019-06-17 分类: ssr  nginx  前端front  

在使用nuxt搭建项目遇到跨域的问题,这里记录下nuxt配置实现axios代理,解决跨域的问题,解决跨域的地方有两个地方,一个是nuxt的proxy,一个是nginx的accessHead设置跨域

nuxt 方式

axios:nuxt默认是有axios包的 如果没有就去下载

$ npm i @nuxtjs/axios @nuxtjs/proxy -D

 nuxt.config.js 最后面添加

module.exports = {
  ...,
  // Nuxt.js modules
  modules: [
    '@nuxtjs/axios', "@nuxtjs/proxy"
  ],
  // 配置代理
  proxy: [
    [
      '/api',{
        target: 'http://ip.ip.ip.ip:port/route',
        changeOrigin:true,
        pathRewrite: {
        '^/api': '/'
        }
      }
    ],
  ],

}

 

nginx 方式:

    # 直接请求nginx也是会报跨域错误的这里设置允许跨域
    # 如果代理地址已经允许跨域则不需要这些, 否则报错(虽然这样nginx跨域就没意义了)
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

页面引用的时候

this.$axios({
  url: '/api/login',
  data: {
    username: '哈哈哈',
    password: '123'
  }
}).then(res => {
  console.log('res: ', res)
});
标签: ssrnginx前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮