关于跨域请求的二三事

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

在前后端分离开发时跨域经常是一个不可回避的问题,这里介绍一个比较简单的办法,前端 vue.js,后端 go

首先要区分简单请求和复杂请求

这里阮一峰有详细讲解过一个: 跨域资源共享 CORS 详解

如果你有一种太长不看的想法,就听我给你简单说一下:

  • 简单路由: 指的就是你平时表单提交,ajax 提交,使用GET,POST,HEAD,http 头信息里面没有杂七杂八

的东西的请求

  • 复杂请求: 就是除了简单请求之外的请求,比如你在 http 头里有自定义的字段,或者你使用像DELETE,PATCH

样的方法

你会发现复杂请求最明显的变化就是浏览器每次去请求接口的时候会发送两次,这里第一次发送的必定是一个请求方法为OPTIONS
的,第二个才是你写的方法,我截图里的就是POST, 第二张截图之所以被判定为复杂请求就是因为我加了一个X-TOKEN这个
header,而如果第一次的OPTIONS方法的请求如果失败了也就不会发送第二条信息了,至于为什么,我只能说这是规定

跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
------HTTP访问控制(CORS)

对于简单请求和复杂请求的处理(后端)

既然叫简单请求处理起来也很简单,下面已经列出代码, 关键就是设置Access-Control-Allow这一些参数就行,
复杂请求就是添加一个针对OPTIONS的处理方式,通常情况返回一个空字符串就行至于跨域验证之类的就是八仙过海各显神通了
各家有个家的处理方法

package main

import (
    "flag"
    "fmt"
    "net"
    "net/http"
)

type httpServer struct {
}

func (s *httpServer) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    // Stop here if its Preflighted OPTIONS request
    if origin := r.Header.Get("Origin"); origin != "" {
        w.Header().Set("Access-Control-Allow-Origin", "*")    // 限制请求方的域 * 就是不限制
        w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")    // 限制请求方式
        w.Header().Set("Access-Control-Allow-Headers","Action, Module")   //有使用自定义头 需要这个,Action, Module是例子
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type,Authorization,X-Token") //允许的header的类型
    }

    // if r.Method == "OPTIONS" {    // 针对复杂请求时做出的处理
    //     return
    // }

    w.Write([]byte("hello"))
}

func main() {
    addr := flag.String("http-address", "", "")
    flag.Parse()

    var h httpServer

    httpListener, err := net.Listen("tcp", *addr)
    server := http.Server{Handler: &h,}
    server.Serve(httpListener)

    fmt.Println("finish ", err)
}

博客原文

本文来自:Segmentfault

感谢作者:只是一个id

查看原文:关于跨域请求的二三事

入群交流(和以上内容无关):Go中文网 QQ 交流群:798786647 或加微信入微信群:274768166 备注:入群;关注公众号:Go语言中文网

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