ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

跨域解决方法

2022-09-08 04:35:01  阅读:198  来源: 互联网

标签:跨域 server webpack 3001 func 解决 方法 请求


jsonp

原理:利用了img,link,script,iframe标签都不存在跨域限制的特点,使用script标签传递函数

大致步骤:前端把一个函数(func)传递到后端,后端做字符串拼接,得到 "func('一段文字')" 的字符串,发送回前端后,前端就会执行 func('一段文字')

缺点:只能处理get请求,因为要通过?callback=xxx的形式;而且有安全隐患,1、任意程序可获取,数据不安全

前端

<script>
function func(txt) {
  alert(txt)
}
</script>
<script src="http://localhost:9527/test?callback=func"></script>

后端

app.get('/test', (req, res) => {
  const callbackName = req.query.callback
  const data = '一段文字'
  res.send(`${callbackName}(${data})`)
})

CORS

要后端设置Access-Control-Allow-Origin,指定哪些域名允许跨域来请求后端数据

webpack的proxy代理

第一步:安装webpack-dev-server工具
npx i webpack-dev-server
第二步:在webpack.config.js里配置devServer

devServer: {
  proxy: {
    // 把所有以 / 开头的请求都会被发送到http://127.0.0.1:3001/下,以前是请求的 http://127.0.0.1:3001/test,就要改成 /test
    // 当设置changeOrigin为true,webpack-dev-server会用node启动一个服务(因为服务器请求服务器不存在跨域限制),来做中层的代理(从3001请求到数据,再返回给我们),来帮我们解决从3000到3001之间的跨域问题
    '/': {
      target: 'http://127.0.0.1:3001',
      changeOrigin: true
    }
  }
}

标签:跨域,server,webpack,3001,func,解决,方法,请求
来源: https://www.cnblogs.com/Lilc20201212/p/16667886.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有