react axios 跨域访问一个或多个域名问题_AJAX相关

来源:脚本之家  责任编辑:小易  

仿货吊牌颜色写的是RANDOM,很可疑,还有背包里的洗标,菲律宾制造那联的顶部,有个数字组合,前面是MODEL号,后面是PO号,就是二维码前面的那串POXXX的,看看能对上没,还有一点就是肩带上的鸟表,产地标只绣MADE IN PHLIPINES的会稳当点,MADE IN/FABRIQUE AUX PHLIPINES这个标的得小心点,但这个标的MANTIS 26正品也好像有,这个我不100%确定,但我发现tb上3,400的那些货都是MADE IN/FABRIQUE AUX PHLIPINES。希望能对你有帮助www.zgxue.com防采集请勿采集本网。

1.react + axios 跨域访问一个域名

跨域跟vue没什么关系吧,配置服务器的cros,或者jsonp,常用的跨域解决方案就可以了

配置非常简单,只需要在当前的 package.json 文件里面配置:

跨域跟vue没什么关系吧,配置服务器的cros,或者jsonp,常用的跨域解决方案就可以了

"proxy":"http://iot-demo-web-dev.autel.com", //当然,这里是一个假地址

可以使用代理解决,比如nginx,非常简单

像这样:

vue跨域可以使用自带的proxyTable功能,打开工程找到config/index.js 搜索proxyTable参数,修改如下: proxyTable:{ '/abc':{ target:'http://192.168.3.100', secure:false, changeOrigin:true,

这样跨域便完成了,当然,也可以像网上那样,多几段代码,像这样:

首先,提问中说的不行是报什么错,如果不明确说明错误,大家很难帮你解答。

我不知道你们写入这段代码会怎么样,反正我是会报错,具体报错是怎么我这里没办法展示,因为我的项目已经 运行了 npm run eject 这个命令

报错的意思大概就是 proxy 希望得到的是一个字符串,而现在得到的是一个对象,所已我只能采取 第一张图片的方法进行跨域

而后我们安装axios ,当然,其他的也行,在 src 目录项目建一个 api文件, 再在api文件里面建一个 user.js 写上下面这段代码

import axios from 'axios'export function _user(data) { return axios.get('device/detail', data)}

我这里的跨域使用的是第一张图片上的那种跨域

在你需要发送请求的地方写上以下代码:

import { _user } from '../api/user' componentDidMount() { let res = _user({}) console.log(res) }

接下来咱们就能愉快的获得后台给我们的数据了

上面的那种跨域呢,可以说是非常方便,但是吧,如果后台给我们两个甚至三个不同的域名呢   怎么办,那我们就得使用插件

2.react +axios 跨域访问多个域名

安装插件:npm install --save http-proxy-middleware

安装好了之后咱们是开始配置啦:

1.首先暂时运行命令将配置暴露出来

npm run ejectoryarn eject

在这里你可能会遇到一个报错:

那这个时候你可以将报错百度一下,或者跟着我继续操作

报错的原因呢是因为咱们在使用脚手架搭建 react 时,系统会自动给我们添加一个 .gitignore 文件,如果你没有提交到仓库过,你就需要先提交到仓库

完成这两步之后就可以继续 命名 npm run eject ,等配置文件暴露完成之后,你的 package.json 可能非常多配置,咱们不用管,在 src 下面建一个 setupProxy.js 在里面写上下面代码:

const { createProxyMiddleware } = require('http-proxy-middleware')module.exports = function (app) { app.use( createProxyMiddleware('/api', { target: 'http://iot-demo-web-server-dev.autel.com', changeOrigin: true, }) ) app.use( '/sys', createProxyMiddleware({ target: 'http://localhost:5001', changeOrigin: true, }) );}

找到 scripts 路径 打开 strat.js

在第 117行左右 协商下面代码:

require('../src/setupProxy')(devServer) //注意路径是否正,是你刚才建的那个文件

如此 多个跨域便成功了,值得注意的就是, 需要在你请求的具体路径前面加上 api 或 sys 像这样

总结

到此这篇关于react axios 跨域访问一个或多个域名的文章就介绍到这了,更多相关react axios 跨域内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

axios 的跨域问题,分以下几种情况:1、server 端不支持跨域,比如遇到下面的错误就是这种情况No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://xxx.com' is therefore not allowed access.解决方案:如果 server 端是自己开发的,那么修改相关代码支持跨域即可。如果不是自己开发的,那么可以自己写个后端转发该请求,用代理的方式实现。2、server 端支持跨域,但不能响应 OPTIONS 请求,比如在开发者工具中看到下图中的情况,说明 Nginx 不能响应 OPTIONS 请求内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解springboot+react项目跨域访问问题
  • react如何解决fetch跨域请求时session失效问题
  • react+spring实现跨域问题的完美解决方法
  • react中fetch之cors跨域请求的实现方法
  • 详解react native 采用fetch方式发送跨域post请求
  • ajax异步(请求)提交类 支持跨域
  • ajax技术基础介绍
  • ajax客户端异步调用服务端的实现方法(js调用cs文件)
  • ie9下ajax无法刷新数据的缓存问题解决方法
  • 解决ajax方式上传文件报错"uncaught typeerror: illegal invocat
  • 通达oa 使用ajax和工作流插件实现根据人力资源系统数据增加oa账号
  • ajax验证用户名是否存在的实例代码
  • js对ajax返回数组的处理介绍
  • ajax跳转到新的jsp页面的方法
  • ajaxui:鼠标拖拽
  • axios可以解决跨域访问的问题吗
  • axios可以解决跨域访问的问题吗
  • vue axios发送post请求,怎么设置请求头解决跨域
  • vue用axios和springMVC跨域就是做不通呢,有人帮忙看下吗
  • axios.js怎么跨域
  • axios post怎么跨域
  • vue axios跨域怎么解决
  • vue axios发送post请求,怎么设置请求头解决跨域
  • 请问怎么在react中使用axios的POST方法,查了要设置content-type值,但按照官网的方法也不行
  • VUE axios post请求 跳转跨域问题
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页ajax相关详解springboot+react项目跨域访问问题react如何解决fetch跨域请求时session失效问题react+spring实现跨域问题的完美解决方法react中fetch之cors跨域请求的实现方法详解react native 采用fetch方式发送跨域post请求ajax异步(请求)提交类 支持跨域ajax技术基础介绍ajax客户端异步调用服务端的实现方法(js调用cs文件)ie9下ajax无法刷新数据的缓存问题解决方法解决ajax方式上传文件报错"uncaught typeerror: illegal invocat通达oa 使用ajax和工作流插件实现根据人力资源系统数据增加oa账号ajax验证用户名是否存在的实例代码js对ajax返回数组的处理介绍ajax跳转到新的jsp页面的方法ajaxui:鼠标拖拽jquery ajax 向后台传递数组参数ajax readystate的五种状态详解ajax中的async属性值之同步和异步jquery实现ajax定时刷新局部页面ajax传递多个参数具体实现jquery ajax中使用serialize()方ajax获取数据中文乱码问题最简单自己动手打造ajax图片上传(网上没ajax获取数据然后显示在页面的实ajax 缓存问题的两种解决方法(iepjblog发表评论用的ajaxjs.jsajax以及一些乱码问题ajax向后台传json格式的数据出现415错误的使用html5中postmessage知识点解决ajax中ie8/ie9下ajax缓存问题ajax提交整个from表单示例代码有史以来最简单的ajax回调库$.ajax传json数据到后台出现报错问题解决ajax传递特殊字符的数据如何解决ajax跳转路径代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved