react 前端解決跨域
1. package.json中配置proxy
- 優(yōu)點(diǎn)：簡單,無需考慮版本
- 缺點(diǎn)：只能處理一類跨域請求
- 示例
// 在package.json中增加參數(shù) "proxy":"localhost:3030" //這樣我們就可以實(shí)現(xiàn)跨域了剩蟀。
2. http-proxy-middleware
- 優(yōu)點(diǎn)：可以處理多類跨域
api - 缺點(diǎn)：需要考慮版本
- 示例
// 在src 目錄下創(chuàng)建setupProxy.js文件 const { createProxyMiddleware } = require('http-proxy-middleware'); //注意寫法切威，這是1.0以后的版本，最好按抄缰冤。這里的版本指的是'http-proxy-middleware module.exports = function (app) { app.use(createProxyMiddleware('/api', { target: 'http://localhost:3030', /* * 這里有一個小坑喳魏，如果重寫地址我們的后臺接口是不需要更改的，如果不配置重寫迷郑，我們的后臺也需要加上/api. */ // pathRewrite: { // '^/api': '', // }, changeOrigin: true, secure: false, // 是否驗(yàn)證證書 ws: true, // 啟用websocket } )); };
總結(jié)：
- 自己同時編寫前后端對于理解
http很有幫助创倔，在這里踩了很多坑畦攘。最為郁悶的就是在配置了setupProxy.js只有react start跑不起來了.....驚了。報(bào)錯require().....not a function知押。不要慌。罢绽。静盅。穩(wěn)住。棚壁。栈虚。
