vue跨域问题

作者: 曼少女 | 来源:发表于2018-07-28 15:20 被阅读270次

方法一:使用代理拒绝跨域问题

1、在文件config下建文件proxyConfig.js
代码如下:

module.exports = {
  proxy: {
    '/api': {    //将www.exaple.com印射为/apis
      target: 'https://www.exaple.com',  // 接口域名
      secure: false,  // 如果是https接口,需要配置这个参数
      changeOrigin: true,  //是否跨域
      // pathRewrite: {   //  如果本身的接口地址就有 '/api' 这种通用前缀,也就是说https://www.exaple.com/api,就可以把 pathRewrite 删掉
      //   '^/api': '/'   //需要rewrite的,
      // }
    }
  }
}

2、在文件config下的index.js修改代码:

const proxyConfig = require('./proxyConfig')
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // proxyTable: {},
    proxyTable: proxyConfig.proxy,
  //  其他代码省略
  },

3、使用接口的时候就可以直接这样使用,如:

export const LoginURL = `/api/auth_token/`
export const RequestReviewImgURL = `/api/patch/224/`

注意:相当于使用接口:https://www.exaple.com/api/auth_token/
该例子的接口本身地址就有 '/api' 这种通用前缀

相关文章

  • axios跨域和配置proxyTable

    使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题 vue.js学习之 跨域请求...

  • Vue2.x-实现跨域请求(fetch/axios/proxyt

    Vue2.x-实现跨域请求(fetch/axios/proxytable)跨域问题,修改proxyTable,然后...

  • vue简单接口封装 跨域问题处理

    vue接口封装: 第一步:解决跨域 接口请求,一般都会碰到跨域问题,在vue项目中,我们采用页面代理的方法解决跨域...

  • Vue学习笔记(一)

    跨域问题 vue前端跨域问题 1. 利用vue-cli框架与axios结合,访问服务器后端接口,axios不需要太...

  • Vue跨域请求

    在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。 1、当跨域无法...

  • vue-cli脚手架项目中的跨域解决方案

    1、在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。 2、当跨域...

  • 解决一例Vue跨域访问无效

    在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。当跨域无法请求的...

  • uni-app及vue浏览器跨域问题解决

    以猫眼电影接口为例: 假设请求接口 遇到跨域问题 vue解决跨域 在项目根目录下新建vue.config.js文件...

  • ajax 请求

    Vue开发中解决跨域问题 Axios 配置请求拦截

  • Vue面试归纳

    1. Vue项目axios跨域 跨域问题出现,使用webpack-dev-server的proxy功能处理 1...

网友评论

本文标题:vue跨域问题

本文链接:https://www.haomeiwen.com/subject/viuomftx.html