[JavaScript知识库][react代码片段] 解决跨域 + axios请求

解决跨域

安装：

npm i -D http-proxy-middleware

src\setupProxy.js

const { createProxyMiddleware: proxy } = require('http-proxy-middleware');

// 导出模块
module.exports = app => {

  // 匹配代理路由规则
  app.use('/api', proxy({
    target: 'https://api.iynn.cn/film',
    changeOrigin: true,
    pathRewrite: {}
    // pathRewrite: {'^/api': ''}
  }))

}

封装axios请求

src\utils\http.js

import axios from 'axios'

// 得到一个新的请求实例
const instance = axios.create({
  // 请求超时时间
  timeout: 10000
});

// 响应拦截器
instance.interceptors.response.use(res => res.data, err => Promise.reject(err))

// get请求
export const get = (url, config = {}) => instance.get(url, config)
// post请求
export const post = (url, data = {}, config = {}) => instance.get(url, data, config)

export const put = (url, data = {}, config = {}) => instance.put(url, data, config)

export const del = (url, data = {}, config = {}) => instance.delete(url, data, config)

src\api\config\filmConfig.js

const config = {
  film: '/api/v1/getNowPlayingFilmList?cityId=110100&pageNum=1&pageSize=10'
}


export default config

src\api\filmApi.js

import { get } from '../utils/http'
import config from './config/filmConfig'

// 电影列表
export const getFilmsApi = () => get(config.film)