前端跨域请求实用方法

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

你好，我是南一。这是我在准备面试八股文的笔记，如果有发现错误或者可完善的地方，还请指正，万分感谢🌹

我经常遇到跨域问题，在本地启动前端项目，通过3000端口访问http://localhost:3000，本地启动服务器在却在另一个端口http://localhost:80，这时如果不做处理，前端往服务端发送请求就会报跨域错误。以下介绍两个解决方法。

方法一、服务端开启允许跨域

const express = require('express')
const app = express()
app.listen(80, () => {
  console.log("express running at port 80...");
})
app.all('*', function (req, res, next) {
  //设置请求头
  //允许所有来源访问，*也可以换成指定的源地址比如 http://localhost:3000
  res.header('Access-Control-Allow-Origin', '*')
  //设置允许的请求头字段
  res.header("Access-Control-Allow-Headers", " Origin, X-Requested-With, Content-Type, Accept");
  //允许访问的方式
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  //修改程序信息与版本
  res.header('X-Powered-By', ' 3.2.1')
  //内容类型：如果是post请求必须指定这个属性
  res.header('Content-Type', 'application/json;charset=utf-8')
  next()
})

方法二、客户端配置代理

如果是用React脚手架，那么在src目录下添加一个setupProxy.js文件，并加入以下内容

// 引入 http-proxy-middleware 中间件
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
// app 类似一个express应用程序，调用use使用中间件
  app.use(createProxyMiddleware('/api', {
    target: 'http://localhost:80',
    pathRewrite: { '^/api': '' },
    changeOrigin: true
  }))
}

webpack启动的应用程序在3000端口，代理将带/api的请求发送到http://localhost:80，并且重写请求地址，去掉/api

http://localhost:3000/api/login --> http://localhost:80/login

以axios为例，客户端业务代码编写如下

import React from 'react'
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/api'
export default function CSRF() {
  axios.post('/login').then((res) => {
    console.log(res);
  })
  const handleClick = () => {
    axios.get('/safe')
  }
  return (
    <div>
      <button onClick={handleClick}>点击</button>
    </div>
  )
}

以express为例，服务端代码编写如下

const express = require('express')
const app = express()
app.listen(80, () => {
  console.log("express running at port 80...");
})
app.post('/login', function (req, res) {
  res.send({
    code: 200,
    status: 'success'
  })
})
app.get('/safe', function (req, res) {
  res.send({
    code: 200,
    status: 'success'
  })
})