本地跨域请求服务器调试

在网页开发的过程中，时常需要进行跨域请求，去测试服务器请求数据。

• 跨域限制是浏览器行为，不是服务器行为
  要理解和解决跨域问题，需要深刻理解-跨域限制是浏览器行为，不是服务器行为。这也是为什么跨域通过postman这类工具来直接请求服务器接口数据，而在网页中通过js就不可以的原因，因为js运行在浏览器，当js运行的环境url和请求的接口数据的url不同域，并且服务器没有允许跨域请求时，浏览器就会认为这个请求是不安全的，就会限制请求。

理解了跨域限制是浏览器行为，不是服务器行为的原理后，就很容易解决跨域问题了。有两种方法：
1、 服务器端后台代码进行特殊设置，允许客户端进行跨域请求

• java

private void enableCORS(Request request, Response response) {
    response.header("Access-Control-Allow-Origin", "*");
}

• golang

func EnableCORSAndCredit(w *http.ResponseWriter, req http.Request) {
    (*w).Header().Set("Access-Control-Allow-Origin", req.Header.Get("Origin"))             //允许访问所有域
    (*w).Header().Add("Access-Control-Allow-Headers", "Content-Type") //header的类型
    (*w).Header().Add("Access-Control-Allow-Credentials", "true")
}

2、客户端设置代理。利用服务器之间没有跨域的原理,通过本地起的服务当做代理服务器,与我们需要真正请求的服务器做中间数据的传输。

• 本地开发利用caddy做代理服务器避免跨域请求

首先安装caddy

# mac
brew install caddy

编写caddy代理配置文件

# Caddy 服务器运行的主机、端口
localhost:3002
# 假定react开发服务器运行在 localhost:3000 端口
proxy / http://localhost:3000
proxy /sockjs-node localhost:3000 {
  websocket
}
proxy /api https://server

启动caddy

$ caddy --conf ./caddyfile

随后我们就可以在 localhost:3002 访问 React.js 页面 - 注意不是 localhost:3000。caddy 会将 / 请求转发到 3000 端口，而 /api 请求则转发到 https://server，一样解决跨域问题。