标签：npm axios 请求 request 后台 import findDList 跨域

本文记录使用axios请求后台的操作，可参看文档 进入

1 下载 axios 相关包

在 Idea 控制台输入，如果npm不能直接下载相关的辅助包，则推荐查看博文

1 安装 axios: npm install axios
2 刷新项目中的包: npm install 
3 发布前端工程: npm run serve 

配置Axios请求

request.js 代码

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:8081',//此处为后台程序的端口号
  timeout: 3000
});
export default instance;

api/user.js 代码，注意user.js主要存储和User对象相关的操作

import request from '../utils/request'
/*
后面每次请求都需要携带token
 */
export const findDList = () => {
  return request({
    url: '/system/ddict/findDList',
    method: 'get'
  })
}

主页调用

<script>
import { findDList } from '../../api/user'
export default {
  name: 'Users',
  },
  created () {
    // 创建组件的时候 调用医生信息查询
    this.getDList();
  },
  methods: {
  //异步请求
    async getDList(){
     const {data} = await findDList()
      console.log(data);
    }
  }
}
</script>

上面配置完，在访问时，会出现跨域问题，即Access-Control-Allow-Origin问题

解决跨域

解决跨域问题的方法有很多：
1 jsonp解决跨域问题
2 nginx反向代理解决跨域问题
3 @CrossOrigin 解决跨域问题
4 配 WebMvcConfigure解决跨域问题
…

法(1) 其中最简单的当然是基于注解，在相应的controller上方添加 @CrossOrigin 解决跨域

法(2) 如果有些情况下注解无法满足跨域的问题，则需要手动配置configuration，具体操作如下：

CrosConfig.java 相关代码如下

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration //注解不能丢，丢了不会起效
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","DELETE","OPTIONS","HEAD")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

测试

标签：npm,axios,请求,request,后台,import,findDList,跨域
来源： https://blog.csdn.net/qq_29750461/article/details/122524522

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。