当前位置: 萬仟网 > IT编程>脚本编程>vue.js > 跨域问题Responsetopreflightrequestdoesn'tpassaccesscontrolcheck:No'Access-Control-Allow-Origin

跨域问题Responsetopreflightrequestdoesn'tpassaccesscontrolcheck:No'Access-Control-Allow-Origin

2018年12月19日  | 萬仟网IT编程  | 我要评论
场景:前端跟后台联合开发的时候,在局域网内,访问别人的地址可以获取数据,但是通过接口请求,就会跨域 解决方法:现在是vue项目,用axios请求,前端这边单独解决这个问题,不需要后端处理 第一、找到

场景:前端跟后台联合开发的时候,在局域网内,访问别人的地址可以获取数据,但是通过接口请求,就会跨域

解决方法:现在是vue项目,用axios请求,前端这边单独解决这个问题,不需要后端处理

第一、找到config/index.js

设置proxytable,实际上就是设置代理路径(ps:设置config文件之后,需要重新npm run dev)

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoopenbrowser: true,
  assetssubdirectory: 'static',
  assetspublicpath: '/',
  proxytable: {
    '/api': {
       target: '请求地址ip加端口',
       changeorigin: true,
       pathrewrite: {
        '^/api': '/'
       }
      }
  },
 }

第二,新建一个封装axios的文件,如 src/api/index.js,如果不封装,上面的代理将不能识别,原因暂时不知,

里面就是封装的接口方法

//输出通用axios实例
import axios from 'axios';

const instance = axios.create({
  timeout: 10000,
   headers: {
    'content-type': "application/json;charset=utf-8"
  }
});

export default {
  userlogin ( data ) {
    return instance.post('/api/user/login', data);
  },
  alluser () {
    return instance.post('/api/user');
  },
  allproduct () {
   return instance.post('/api/product')
  },
  upload (data) {
    return instance.post('/api/upload',data)
  },
  regist (data){
  	return instance.post('/api/createorupdateuser',data)
  }
};

第三、在main.js引用

import instance_ from './api/index';

vue.prototype.instance = instance_ //axios实例

第四,就可以调用自己定义的接口了,如

this.instance.regist({      
  userid: '',   
  username: this.username,   
}).then(res=>{
  console.log("sd")
}).catch(function (error) {
  console.log(error);
});

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com