本地跨域请求服务器调试

鹅鹅鹅_ · · 719 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

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

  • 跨域限制是浏览器行为,不是服务器行为
    要理解和解决跨域问题,需要深刻理解-跨域限制是浏览器行为,不是服务器行为。这也是为什么跨域通过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,一样解决跨域问题。


有疑问加站长微信联系(非本文作者)

本文来自:简书

感谢作者:鹅鹅鹅_

查看原文:本地跨域请求服务器调试

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:701969077

719 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传