前端vue后端go如何进行跨域设置？一篇就通透理解

03-27 1845阅读 0评论

什么是跨域，为什么要跨域？

跨域（Cross-Origin）指的是在浏览器中，当一个 web 应用程序试图访问不同域名、不同端口或不同协议的资源时，就会发生跨域请求，此时浏览器的同源策略（Same-Origin Policy）就会进行拦截，他是同源策略是一种安全机制，它限制了网页中的 JavaScript 代码只能访问同源（相同协议、主机和端口）的资源，以防止恶意网站通过 JavaScript 访问用户的敏感信息。

那我们为什么要跨域呢？

前端分离的项目：两者是运行再不同一个端口或者说是不同一个域名的，比如前端运行在localhost:9090而后端却运行在localhost:9092端口，他们传输数据就需要跨域才可以。
第三方资源集成：网站可能不仅需要后端的数据还需要第三方资源，通俗就是别的网站上的内容我也想要借用，此时别的网站也就是另外一个域名，跨过去就又是跨域了。
跨域通信：在某些场景下，不同域名的网页需要进行通信、数据交换或共享信息，例如使用跨域 Ajax 请求获取数据。

本篇文章主要说前端设置代理服务器的方式进行处理，后端讲解通过跨域资源共享（CORS机制来实现跨域请求。

主要讲解localhost的不同端口发送的跨域请求，不同域的跨域请求是一样的流程下篇文章讲解什么是域以及域和ip地址的关系。

1.前端跨域处理方式以及原理

先看前端的vue项目，我们先创建一个vue项目然后找到其中的vue.config.js 将这段代码复制上去

//前端跨域处理方式
module.exports = {
  devServer: {
    port: 9090, // 自定义端口
    proxy: {//设置跨域请求
      '/api': {   //只要是api开头的就会转到后端
            target: 'http://localhost:9092', // 后端监听的地址
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/api'
            }
      }
    }
  }
}

* 前端代码解释

port就是设置前端运行的端口位置，proxy就是代理的意思，之后设置当在前端的请求中如果有/api路径的ajax请求的话，就会把发送请求的端口改为http://localhost：9092，也就是说前端要发送的请求让http://localhost：9092来代替发送，changeOrigin意思就是是否开启代理，最后pathRewrite意思是路径代替，比如原来的请求默认是本地端口+路径也就是=

（http://localhost：9090/api/login）对吧，此时路径代替('^/api': '/api')的意思就是将api及其以前的部分代替成api，那么此时的路径是否就变为了api/login,然后再在路径的前面加上发送请求的代理端口，此时发送出来的请求就是http://localhost：9092/api/login 看最后的结果就是通过前面的代理配置然后得到了真正的后端需要的路径。

然后就能够成功发送给后端了，后续等待后端返回数据时，在浏览器看来它发送请求的地方时代理服务器http://localhost：9092，它接收的数据是

后端在http://localhost：9090端口发送的，那么请求的发送和数据的接收是在同一个端口，之后就判断是符合同源协议的。此时也就实现了跨域请求数据。

2后端跨域处理方式以及原理

这里为了更方便多人观看我后端用的是net/http包中的go原生语言中的http请求创建服务器、处理函数的，并没有使用gin框架

先看一眼我后端的创建服务器和请求然后就讲解跨域原理

func main() {
    // 定义接口处理函数
    loginHandler := func(w http.ResponseWriter, r *http.Request) {
        fmt.Fprint(w, "Hello, api/login!")
    }

    // 注册接口处理函数
    http.HandleFunc("api/login", loginHandler)

    // 创建服务器并设置跨域请求的响应头
    server := &http.Server{
        Addr:    ":9092",
        Handler: corsMiddleware(http.DefaultServeMux),
    }
    // 启动服务器
    server.ListenAndServe()
}

// 中间件函数，用于设置跨域请求的响应头
func corsMiddleware(handler http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        // 允许所有域名访问，可以根据实际需求进行修改
        w.Header().Set("Access-Control-Allow-Origin", "http://localhost:9090") // 前端的地址 //指定允许访问该资源的外域 URI，对于携带身份凭证的请求不可使用通配符*

        // 允许的请求方法
        w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE") //指明实际请求所允许使用的 HTTP 方法

        // 允许的请求头字段
        w.Header().Set("Access-Control-Allow-Headers", "Content-Type, Authorization")//指明实际请求中允许携带的首部字段

        // 预检请求的缓存时间，单位为秒
        w.Header().Set("Access-Control-Max-Age", "3600")

        fmt.Println("前端发送了option")
        // 如果是预检请求，直接返回
        if r.Method == http.MethodOptions {
            return
        }
        fmt.Println("前端发送了post")
        // 调用下一个处理函数
        handler.ServeHTTP(w, r)
    })
}