react axios 跨域问题
周末又是补充知识点的时候了,用了react axios 跨越问题,貌似是要比vue 稍微麻烦一点
它请求http好像是没有问题的,但是https还是有跨域问题的,
我用的刚好是create-react-app 这个搭建的react 项目,你必须要确保 运行了npm run eject,
把你的webpack暴露出来,好了接着在 package.json 配置下面这段话:
当然是在末尾加入就行了
"proxy": {
"/*": {
"target": "https://douban.uieee.com",
"changeOrigin": true
}
}
这样还没有解决跨越问题,还必须在axios 文件创建请求判断:
import axios from 'axios'
let baseUrl = 'https://douban.uieee.com'; if (process.env.NODE_ENV === 'development') {
baseUrl = 'http://localhost:3000';
} else {
// baseUrl = 'http://localhost:3000';
}
// export const baseUrl = 'http://localhost:3000';
let $axios = axios.create({
baseURL: baseUrl + '/v2/movie',
timeout: 10000,
responseType: 'json',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
}
});
我是结合Promise 请求数据的这样你就可以在解决跨区问题了,正式环境就配置正式的环境。
好了 ,7月了, 希望7月对我好点,继续加油!
react axios 跨域问题的更多相关文章
- react axios 跨域访问一个或多个域名
1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...
- vue-cli axios跨域 + 反向代理模拟http请求host+referer
axios跨域 配置config->index.js中的proxyTable,内容如下: proxyTable: { // 跨域请求 '/api': { // 注意此处可设置为 '*' 代表不限 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- 使用ajax请求接口,跨域后cookie无法设置,全局配置ajax;及使用axios跨域后cookie无法设置,全局配置axios
问题一: 使用ajax/axios跨域请求接口,后端放行了,能够正常获取数据,但是cookie设置不进去,后端登录session判断失效 ajax解决办法: //设置ajax属性 crossDomai ...
- axios 跨域配置
axios跨域设置 找到项目config文件夹下的index.js文件,将dev中的proxyTable项中添加配置 proxyTable: { '/api': { target: 'https:// ...
- axios跨域问题(包括开发环境和生产环境)
之前写过一篇axios跨域问题,写的过于片面,没有考虑过实际开发中遇到的问题,以及如何全局使用axios,这次再写一篇,以后再有新发现再更新... 1.在static文件夹下新建/js/config. ...
- axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...
- vue 使用axios 跨域请求数据的问题
axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...
随机推荐
- kafka代码测试连接
1.发送: package kafka.test; import java.util.Date;import java.util.Properties;import java.util.Random; ...
- node在Web中的用途
1.网站后台: user browser ——> application server(node开发的application,处理用户的所有请求和给用户的响应) 2.分发数据请求,渲染HTML: ...
- C#使用NPOI读写excel
本帖内容来自网络+自己稍作整理,已找不到原贴,侵删 个人比较习惯用NPOI操作excel,方便易理解.在宇宙第一IDE(笑)——VS2017中插入NPOI就很方便: 首先安装NPOI: 然后在.cs文 ...
- 龙芯软硬件培训个人总结-day1
第一天主要针对的硬件设计,推他们年底要量产的3A4000+7A1000.这里我只记录下自己关注的几个点. 1,3A4000/3B4000处理器 支持256位向量指令: 对处理器封装进行了优化,不 ...
- P2802 【回家】
(づ ̄3 ̄)づ╭❤-(题面哦~~) 当初做的时候也借鉴了一些题解,发现确实有很多人都是在n和m上分不清.. 好吧,我也没分清.. 然后就一直不停错,还找不出来原因.. 最后狠心把所有判断dfs停止的条 ...
- AppDomain介绍
一.建立控制台项目 二.更改Program为ADSetp 三.去掉命名空间AppDomain.CurrentDomain 四.贴代码 using System; using System.IO; us ...
- Spring Cloud 使用Feign调用服务传递Header中的参数
1.使用Feign 调用其他微服务,尤其是在多级调用的同时,需要将一些共同的参数传递至下一个服务,如:token.比较方便的做法是放在请求头中,在Feign调用的同时自动将参数放到restTempla ...
- [LeetCode] 227. 基本计算器 II
题目链接: https://leetcode-cn.com/problems/basic-calculator-ii 难度:中等 通过率:33.2% 题目描述: 实现一个基本的计算器来计算一个简单的字 ...
- [.net core]2.hello word(.net core web app模版简介)
创建一个.net core web app project 弹出这个窗口 empty代表 最低依赖, 意味着往往需要手动按需添加依赖. web应用程序(模型视力控制器) 则会帮你创建好control ...
- luogu P5328 [ZJOI2019]浙江省选
传送门 每个人都可以看成一条直线\(y=ax+b\),所以我们要求的是每条线在整点处,上方线的数量的最小值(注意多条直线如果交于同一整点互不影响) 如果\(m=1\),其实只要求出半平面交,然后在半平 ...