Vue用axios跨域访问数据

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue用axios跨域" title="axios跨域">axios跨域访问数据
axios是vue-resource的替代品，vue-resource不再维护。
安装axios：npm install axios
使用vue-cli开发时，由于项目本身启动本地服务是需要占用一个端口的，所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。
proxyTable相关配置及使用说明：
在config/index.js文件中，找到dev对象下proxyTable对象进行跨域设置，配置如下：

dev: {
    env: require('./dev.env'),
    host: 'localhost',
    port: 8088,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
            '/api': {
        target: 'https://api.douban.com/v2/movie/',//设置你调用的接口域名和端口号 别忘了加http、https
        changeOrigin: true,//是否跨域
                secure: true, // 允许https请求
        pathRewrite: {
          '^/api': ''//这里理解成用‘/api’代替target里面的地址
        }
      }
    },
--------------------
main.js
/*ajax请求*/
import axios from 'axios'
axios.defaults.baseURL = '/api'//https://api.douban.com/v2/movie 改成/api才能用proxyTable跨域
Vue.prototype.$ajax = axios

--------------------
proxyTable配置的意思为：使用字符串"/api"来代替目标接口域名；如果接口地址为"user/getUserInfo",我们可以在所有的接口地址前面加上"/api/"用于设置代理；如:
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/api/user/getUserInfo'
如果你不想每次请求地址中都带有"/api/",则可以设置
pathRewrite: {
'^/api': '' // 后面可以使重写的新路径，一般不做更改
}
表现结果为：
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/user/getUserInfo'
另外一种情况是，我们不需要在每个接口地址前添加"/api/",只需要用接口本身的地址，不需要重新路径即可。如果接口为："/v2/cotton/get_app_list",使用"/v2"做代理；如下：

dev: {
  proxyTable: {
    '/v2': {
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      secure: false,  // 允许https请求      
      // 这里去掉了重新设置新路径，因为接口地址本身就是以"/v2/"开头的；
    }
}
'http://localhost:8080/v2/cotton/get_app_list' ===> 'http://www.abc.com/v2/cotton/get_app_list'
// http://localhost:8080/v2表示http://www.abc.com
默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，修改配置如下：
proxy: {
  "/api": {
    target: "https://www.abc.com",
    secure: false
  }
}

========================

axios传参

1：Vue官方推荐组件axios默认就是提交 JSON 字符串，所以我们要以json字符串直接拼接在url后面的形式，直接将json对象传进去就行了
let postData = {
　　companyCode:'zdz',
　　userName:'123456789123456789',
　　password:'123456'
}
axios.get('/api/login/doLogin',{
　　params: {
　　　　...postData,
　　}
})
.then(function (response) {
　　console.log(response);
})
.catch(function (error) {
　　console.log(error);
});

这里我们将postData这个json对象传入到post方法中

2：以key：val的形式传参
(1).安装qs:npm install qs
(2).对这个json对象操作
let postData = qs.stringify({
companyCode:'zdz',
userName:'123456789123456789',
password:'123456'
})
(3).再导入
import qs from 'qs'

以上是 Vue用axios跨域访问数据 的全部内容， 来源链接： utcz.com/z/380420.html

回到顶部