问题跨域

跨域

什么是跨域

跨域，全程跨域资源共享（Cross-Origin Resources Sharing, CORS），他是浏览器的一种保护机制，只允许网页请求同一域名下的服务。同一域名的要求是协议、域名、端口都要保持一致。跨域问题可以从三个地方解决：后端、前端、服务器

解决跨域问题

后端

服务器是否启动跨域保护机制，是根据后端的响应来决定的。浏览器的根据是响应的access control allow origin来实现的。如果这个字段的值为*，则允许所有请求；如果这个值为域名，那么只允许指定域名的请求。

配置方法（nodejs）

添加cors中间件npm i cors

把他添加到服务中：

const cors = require('cors')
const app = express()

app.use(cors())

cors也可以进行域名的限制，添加方式为数组，用于指定一个或多个允许跨域的域名：

const cors = require('cors')
const app = express()

app.use(cors({
  origin: ["http://localhost:3000", "http://localhost:8080"]
}))

前端

可以在前端中配置代理中转请求，使用一个中转服务器来发送请求和接收响应。如果脱离了浏览器的发送请求，那么他就不会收到跨域保护机制的影响。

在vite中，可以给vite.config.js文件做配置：

module.exports = {
  devServer: {
    proxy: {
        '/api': {     //这里最好有一个 /
            target: 'http://127.0.0.1:8081',  // 后台接口域名
            ws: true,        //如果要代理 websockets，配置这个参数
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{
                '^/api':''
            }
        }
    }
  }

服务器

对于产品环境或者是开发服务器不支持代理的情况下，我们可以手动创建一个中转服务器来代理请求。
如使用express，使用流程为后端程序 -> 中转服务器，放置前端代码 -> 客户端