cors 以及 react proxy 设置

全栈开发过程中，前端和后端端口通常不一致，例如前端 3000， 后端 8080，此时，从浏览器的角度看，前端和后端分别位于不同的主机，前端没有权限连接后端。

解决办法 1, 后端设置 cors：

node :

方法 1：npm install cors

const cors = require("cors");
app.use(cors());

方法 2：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  );
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE');

  next();
});

go:

// 修改传进来的请求, try to solve CORS 问题
func (app *application) enableCORS(h http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		// "*"  ok
		// "http://localhost:3000"  ok 
		// 允许后端接受来自前端 "http://localhost:3000" 的请求
		w.Header().Set("Access-Control-Allow-Origin", "http://localhost:3000")
		w.Header().Set("Access-Control-Allow-Credentials", "true")
		
		if r.Method == "OPTIONS" {
			w.Header().Set("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE,OPTIONS")
			w.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, X-CSRF-Token, Authorization")
		} else {
			h.ServeHTTP(w, r)
		}
	})
}

// 使用中间件前面设置的中间件 enableCORS
func (app *application) routes() http.Handler {
	// create a router mux
	mux := chi.NewRouter()

	// any middlerware can be put here
	// 此中间件的作用：一旦 app 异常，会以日志记录此异常 以及 backtrace
	// 显示异常发生的地方
	mux.Use(middleware.Recoverer)
	// 使用 CORS 中间件
	mux.Use(app.enableCORS)
	mux.Get("/", app.Home)
	mux.Get("/movies", app.AllMovies)

	return mux
}

解决办法 2， react 前端设置 proxy

此方法用于开发，没试过 vue。后端不需要设置 cors，修改前端 package.json, 增加一行 "proxy": "http://localhost:8080"， 例如：

  "name": "go-movies-frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",

同时，修改 fetch url，例如：

fetch(`http://localhost:8080/movies`, requestOptions)

改成

fetch(`/movies`, requestOptions)