当前位置:   article > 正文

前端配置跨域(代理服务器)_跨域代理服务器写在哪个文件

跨域代理服务器写在哪个文件

方法一: 

配置vue.config.js文件 

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写

在项目下配置vue.config.js文件

在vue.config.js文件里输入

  1. module.exports = {
  2. devServer: {
  3. proxy: {
  4. "/api": { //自定义
  5. target: "http://你的服务器地址/api", //这里可以跟随项目实际部署服务器来
  6. changeOrigin: true,
  7. ws: true,
  8. pathRewrite: {
  9. "^/api": ""//自定义
  10. }
  11. }
  12. }
  13. }
  14. }

 

 方式二:

  使用JSONP跨域

        jsonp原理就是利用<script>标签没有跨域限制,通过<script>标签的src属性,发送带有callback参数,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。

  1. <script>
  2. var script = document.createElement('script');
  3. script.type = 'text/javascript';
  4. // 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数
  5. script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
  6. document.head.appendChild(script);
  7. // 回调执行函数
  8. function handleCallback(res) {
  9. alert(JSON.stringify(res));
  10. }
  11. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/article/detail/57929
推荐阅读
相关标签
  

闽ICP备14008679号