反向代理proxy

最新推荐文章于 2025-03-23 01:21:51 发布

百事皆可乐i

最新推荐文章于 2025-03-23 01:21:51 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_39363320/article/details/101017689

版权

本文介绍了跨域的概念及其原因——同源策略，探讨了跨域的解决方案，包括JSONP和反向代理。对于Vue和React项目，详细说明了如何配置反向代理来解决开发环境中的跨域问题，包括Vue CLI和非CLI项目中的配置方法。最后，解释了JSONP的工作原理并展示了其封装和调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域：跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，基于同源策略的保护，请求不到数据

同源策略：同协议，同端口，同域名

如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击

跨域解决方案：jsonp , cors (后台) ,反向代理

vue反向代理

如果你是用webpack+cli创建的项目：(如果是cli请往下看)
在config/index.js文件中：

module.exports = {
   
  dev: {
   
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
   
      "/api": {
   
          "target":"http://122.51.36.194:5080",//你要代理的api
          "changeOrigin":true,
          "pathRewrite": {
   
          "^/api":""//api相当于一个别名
          }
        }
    },//后边的大括号不要忘记

访问时就通过/api

instance.post('/api/......',data).then(res=>{
   
     console.log(res)
})

react反向代理

1.配置单个反向代理
在package.json 中添加proxy选项
在这里插入图片描述
组件中调用时去掉域名即可
在webpack版本2.0以下，可以是对象（可以设置多个）

在webpack版本2.0以上，只能是字符，只能有一个反向代理

2.配置多个反向代理

安装cnpm i http-proxy-middleware -D

在src文件中新建setupProxy.js文件：

const proxy = require('http-proxy-middleware')

module.exports=function(app){
   
	app.use(

最低0.47元/天解锁文章