黑马程序员技术交流社区

标题: 【上海校区】面试题之Vue中跨域 [打印本页]

---

作者: 爱编码的J    时间: 2020-6-4 20:20
标题: 【上海校区】面试题之Vue中跨域


什么是跨域
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。

[JavaScript] 纯文本查看 复制代码

# 协议跨域

http://a.baidu.com访问https://a.baidu.com；

# 端口跨域

http://a.baidu.com:8080访问http://a.baidu.com:80；

# 域名跨域

http://a.baidu.com访问http://b.baidu.com；

现在很多公司都是采用前后分离的方式开发，那么跨域问题必然会遇到！！！
解决方案
第一种，服务端（后台Java）更改header

[JavaScript] 纯文本查看 复制代码

res.header("Access-Control-Allow-Origin", "*"); // 允许的域名

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 允许的请求方法

第二种：代理
原因就是因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦

[JavaScript] 纯文本查看 复制代码

proxyTable: {

      '/mall': {

        target: 'http://www.baidu.com',

        changeOrigin: true

      }

    },

使用：

[JavaScript] 纯文本查看 复制代码

  list (listParams) {

    return _http.request({

      type: 'post',

      url: '/mall/product/list.do',

      data: listParams

    })

  }

就可以正常发送ajax请求了
第三种：jquery jsonp

[JavaScript] 纯文本查看 复制代码

$.ajax({ 

      url: '地址', 

      type: 'GET', 

      dataType: 'JSONP', 

      success: function (res) { 

        self.data = res.data.slice(0, 3)

        self.opencode = res.data[0].opencode.split(',') 

      } 

    }) 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2