前端-VUE跨域解决方案

1|0什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

广义的跨域：

1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

2|0常见跨域场景

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

3|0VUE跨域的三种解决方案

CROS 服务端设置请求头（后端）

//设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*')

利用script标签支持跨域的属性此方法需要服务端配合指定回调

<script>
    var body_=document.getElementsByTagName('body')[0];
    function search_(){
        var value_=q.value;
        if(value_.trim()==''){
            return;
        }
        var script_=document.createElement('script');//利用script标签之处跨域的属性
        script_.src='http://suggest.taobao.com/sug?code=utf-8&q=' + value_ + '&callback=cb';
        body_.appendChild(script_);
        console.log(script_);
    }
    function cb(res) {//回调函数
        console.log(res);
        // 数据渲染到页面
        var lis = ''
        for (var i = 0; i < res.result.length; i++) {
          lis += '<li>' + res.result[i][0] + '</li>'
        }
        console.log(lis)
        list.innerHTML = lis
      } 
</script>

代理服务器通过vue-cli实现配置vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //开启代理服务器方式一方便简洁
  //缺陷一次只能配置一个 且先会去public中去找
  //如果pubblic中有就不会转发请求了 容易出现问题
  // devServer: {
  //   proxy: 'http://localhost:5000'
  // }
  //开启代理服务器2
  devServer: {
     proxy: {
      "/api": {
        target: "http://192.168.146.49:8081", // 接口地址
        ws: true, // 是否启用websockets
        changOrigin: true, //允许跨域  Origin源127.0.0.1:9000
        pathRewrite: {
          "^/api": "" //请求的时候使用这个/api前缀就可以
        }
      }
    }
  }
})

__EOF__

本文作者：凉宫春日大胜利
本文链接：https://www.cnblogs.com/HaruhiSuzumiya/p/16711279.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！