react 访问后端_react前端用nginx怎么配置跨域访问后端restful api？

开发机器是windows，windows中安装了centos虚拟机做restful api服务器，在浏览器中可以正常访问该api服务器：

http://192.168.33.3:8080/articles

// 20181229004601

// http://192.168.33.3:8080/articles

{

"code": 0,

"message": "OK",

"data": {

"article_list": [

{

"id": 15,

"title": "hello15",

"content": "hello world15",

//...

]

}

前端用react-create-app脚手架，可以正常访问loacalhost:3000，在react中用axios访问后端api服务器，需要做跨域设置，尝试了两种方式：

第1种：在react-create-app中的package.json中添加下面代码

"proxy": "http://192.168.33.3:8080"

这种方式在chrome控制台会出现下面错误：

GET http://192.168.33.3/articles?limit=10&offset=5 net::ERR_CONNECTION_REFUSED

第2种：使用nginx反向代理

1、在windows上安装了nginx，使用localhost:80可以正常访问，在conf/nginx.conf文件中用下面的代码添加一个反向代理服务器，并启动nginx：

//D:\workspace\nginx\conf\nginx.conf

server {

listen 3000;

server_name localhost;

location / {

proxy_pass http://192.168.33.3:8080/;

}

2、使用npm start启动react-create-app脚手架，这时会说3000端口被占用。

问题：

那么，使用nginx应该怎么设置反向代理？

react 访问后端_react前端用nginx怎么配置跨域访问后端restful api？相关推荐

Nginx静态资源跨域访问
一.什么是跨域浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域二.Nginx静态资源跨域访问设置使用模块名称是ngx_http_headers_module 指 ...
Spring Boot配置跨域访问策略
From: https://blog.csdn.net/garyond/article/details/80192760 1. 引言我们在开发过程中通常因为不同应用之间的接口调用或者应用之间接口集成 ...
nginx设置图片跨域访问
生而为人谁不付出谁不努力 #user nobody; worker_processes 1;#error_log logs/error.log; #error_log logs/error.log ...
Nginx配置跨域访问
由于浏览器同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问 ...
nginx里配置跨域
发布于 881天前作者 wendal 1404 次浏览复制上一个帖子下一个帖子标签: nginx 跨域 if ($request_method = OPTIONS ) {add_ ...
前端用nginx解决js跨域问题
前言公司的一个项目,页面需要给第三方接口发送一个请求,获取第三方接口生成的一个二维码图片,结果 js 跨域获取资源报错:" No 'Access-Control-Allow-Origin' ...
vue如何通过Nginx代理做到跨域访问API接口解决404报错
最近和vue对接接口发现总是访问不到 404 发现原因是 vue 使用代理访问接口的时候前面加了一层例如访问 api/index/index 实际是 api/api/index/index 找到 ...
nginx配置跨域访问后不生效，仍然显示跨域问题
解决方案首先,我们先确定跨域源目标没写错,可以先将Allow-Origin改成*测试 server {listen 80;server_name https://www.test.com;locat ...
nginx 反向代理跨域访问配置_nginx反向代理配置去除前缀
使用nginx做反向代理的时候,可以简单的直接把请求原封不动的转发给下一个服务.设置proxy_pass请求只会替换域名,如果要根据不同的url后缀来访问不同的服务,则需要通过如下方法: 方法一:加& ...

react 访问后端_react前端用nginx怎么配置跨域访问后端restful api？

react 访问后端_react前端用nginx怎么配置跨域访问后端restful api？相关推荐

最新文章

热门文章