react中fetch之cors跨域请求的实现方法

项目中使用了react，当中需要使用fetch来代替ajax。

由于react的create_react_app工具很方便，基本上开箱即用，经过创建项目，输入npm start命令后，便自动监听一个3000的端口，到此前端部分就绪。

具体参考：https://github.com/facebookincubator/create-react-app

后端部分我使用了phalcon。

由于前后端分离，为了方便，我尝试在nginx中使之同域（前端和后台api的顶级域名相同），但phalcon框架是单入口、react监听3000时候，通过nginx反向代理，出现js找不到的问题，于是放弃同域的打算。

因此我配置了两个域名：

1、www.xxx.com
2、data.xxx.com

第一个域名用于react部分，端口号是3000（调试用，正式上线是80）
第二个域名用于api，端口号是80

于是乎出现跨域问题。

cors详细的介绍请看：//www.jb51.net/article/102694.htm

以下是php部分的允许跨域域名访问的设置

  $origin    = isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:'';
  $allowOrigin = [
            'http://www.xxx.com',
            'http://xxx.com'
          ];
  if (in_array($origin, $allowOrigin)) {
    header('Access-Control-Allow-Origin: ' . $origin);
  }

  header('Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS');
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Allow-Headers: Content-Type, Accept');

以下是fetch部分的ajax请求

let postData = {a:'b'};
fetch('http://data.xxx.com/Admin/Login/login', {
  method: 'POST',
  mode: 'cors',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: JSON.stringify(postData)
}).then(function(response) {
  console.log(response);
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解React Native 采用Fetch方式发送跨域POST请求

    详解React Native 采用Fetch方式发送跨域POST请求

    Fetch以后是趋势,势必要取代传统的Ajax,而且RN框架支持Fetch.下面仅做了一个跨域请求的例子,在本域请求是一样的,而且更简单一些.客户端环境用的是RN写的一个页面,也可以用浏览器的console控制台模拟.后端服务用的是NodeJs express框架. 1)Fetch请求 //发送Ajax请求 sendAjax(){ //POST方式,IP为本机IP fetch("http://192.168.111.102:8085", { method: "POST&quo

  • React如何解决fetch跨域请求时session失效问题

    React如何解决fetch跨域请求时session失效问题

    前言 fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch.得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能:除此之外,Fetch 还利用到了请求的异步特性--它是基于 Promise

  • react中fetch之cors跨域请求的实现方法

    项目中使用了react,当中需要使用fetch来代替ajax. 由于react的create_react_app工具很方便,基本上开箱即用,经过创建项目,输入npm start命令后,便自动监听一个3000的端口,到此前端部分就绪. 具体参考:https://github.com/facebookincubator/create-react-app 后端部分我使用了phalcon. 由于前后端分离,为了方便,我尝试在nginx中使之同域(前端和后台api的顶级域名相同),但phalcon框架是单

  • Java实现CORS跨域请求的实现方法

    问题 使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据 这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同的环境下进行开发,这时就会出现跨域请求数据的需求,目前的解决方案主要有以下几种: JSONP.iframe.代理模式.CORS等等 前面几种方式在这里不讲,网上有很多资料.在这里我主要分享一下CORS这种解决方式,CORS即"跨域资源共享",它允许浏览器向跨源服务器,发出XMLHttpRe

  • 跨域请求两种方法 jsonp和cors的实现

    在网站后台跨域访问另一服务器时,若被访问服务器未设置response['Access-Control-Allow-Origin'] = '*' 那么将无法获取. jsonp方法 伪造ajax提交请求 请求端 // 基于jsonp // 原理: ajax 不能直接跨域 . //向html中加入script标签 含有访问路径,script标签直接访问路径达到效果 $('.get_service2').click(function () { // 伪造ajax提交请求 $.ajax({ url:'ht

  • Springboot处理CORS跨域请求的三种方法

    前言 Springboot跨域问题,是当前主流web开发人员都绕不开的难题.但我们首先要明确以下几点 跨域只存在于浏览器端,不存在于安卓/ios/Node.js/python/ java等其它环境 跨域请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了. 之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议.域名.端口号都完全一致. 浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的H

  • 使用SpringCloudApiGateway之支持Cors跨域请求

    问题背景 公司的项目需要前后端分离,vue+java,这时候就需要支持Cors跨域请求了.最近对zuul进行升级,假如说zuul是1.0的话,api gateway就是2.0的网关,支持ws等,基于NIO,各方面还是强大的. 解决方案 新建一个Configuration类即可 import org.springframework.cloud.client.discovery.DiscoveryClient; import org.springframework.cloud.gateway.dis

  • Springboot处理配置CORS跨域请求时碰到的坑

    Springboot处理配置CORS跨域请求时碰到的坑

    最近开发过程中遇到了一个问题,之前没有太注意,这里记录一下.我用的SpringBoot版本是2.0.5,在跟前端联调的时候,有个请求因为用户权限不够就被拦截器拦截了,拦截器拦截之后打印日志然后response了一个错误返回了,但是前端Vue.js一直报如下跨域的错误,但是我是配置了跨域的. has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested res

  • 使用CORS实现JavaWeb跨域请求问题的方法

    之前用jsonp 解决跨域问题,现在用CORS实现跨域请求解决java 跨域问题: 主要代码如下 package com.hy.fliter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.

  • 在vue中使用jsonp进行跨域请求接口操作

    前言: 这里我们使用的是第三方插件jsonp. github网址:https://github.com/webmodules/jsonp 1.安装 npm install jsonp -S 2.引入 一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的拼接,封装好这个jsonp文件后export出去,之后在哪里用到就再在那里import. 1.新建jsonp.js文件来封装原始jsonp插件 // 引入原始jsonp插件 import originJsonp f

  • vue 本地环境跨域请求proxyTable的方法

    主要在config->index.js中配置 proxyTable: { '/gameapi': { changeOrigin: true, // target: 'http://rap.id.cn/mockjs/20', mock地址 target: 'http://192.168.1.124',服务器地址 pathRewrite: { '^/gameapi': '/gameapi' }, secure:false } } 因此,发送请求时候url写为('/gameapi/gift-apply

  • Node.js设置CORS跨域请求中多域名白名单的方法

    CORS 说到CORS,相信前端儿都不陌生,这里我就不多说了,具体可以看看这篇文章. CORS,主要就是配置Response响应头中的 Access-Control-Allow-Origin 属性为你允许该接口访问的域名.最常见的设置是: res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Credentials', 'true'); // 允许服务器端发送Cookie数据 然而,这样的

随机推荐