axios get怎么还会显示跨域_react+axios用node代理解决跨域

今天自己搭了个react架子，网上找了个公开的接口，结果发现跨域了。因为接口是别人的，我没法让别人在接口上处理跨域问题，而且这个接口是post请求方式，也没发用jsop处理跨域。

一、前端处理跨域

1、利用proxy代理

特点：这种方式简单易用，不受接口类型限制，get,post等都能支持，适用于与前后端分离的项目。

使用方式：

找到package.json文件，在里面加上 proxy:代理接口地址,重新启动项目即可。

"proxy": "http://10.99.206.102:9992/api/v1"

proxy

需要注意的是，若使用本方法代理跨域，且开启了全局配置的公共接口地址，一定记得将公共接口地址配置为空。我项目一般使用的axios,需要将这个全局配置改为空。axios.defaults.baseURL = ""

随便请求一个接口，看看接口是不是走的自己电脑的ip或者localhost,若不是就证明代理跨域没成功，检查下接口配置有没有清理。

2、利用jsonp处理get请求

若只是想处理单个get请求的跨域，直接使用jsonp方式即可。这个项目中基本没用，有需要的话，自己百度看看怎么操作的。

二、node代理跨域

总体思路，就是直接让node去掉这个跨域的接口(因为服务器端不存在跨域，所以node调用接口是没毛病的)，拿到结果。然后在node端抛出这个路由，前端调用这个接口就可以了。但是我的react是脚手架启动的，并不是我写的node启动的，所以端口还是不一样，这样还是有跨域问题，这时候的跨域问题就很好解决了，在后端配置下cros就好了。

当然，这种方式比较麻烦，一般工作中后台直接处理跨域就可以了，不需要单独再启动node处理跨域。这里就是记录下node一个完整的调用过程，java处理跨域也是一样开启一个cros即可。

闲话不多说，我直接把代码附上，然后把写代码过程中遇到的问题总结下。

我调用的公共接口是 图灵机器人 里的接口

接口地址:

我是直接用create-react-app搭建的项目，然后把src下面的目录都删掉，自己建了两个文件，index.js和index.css

最终的文件目录结构如下：

文件目录

src/index.js文件如下：

import React from 'react'

import ReactDOM from 'react-dom'

import axios from 'axios'

import './index.css'

class Layout extends React.Component{

constructor(){

super()

this.state={