黑马程序员技术交流社区

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

作者: 爱编码的J    时间: 2020-5-6 14:34
标题: 【上海校区】面试题之vue跨域
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;

解决方案

第一种,服务端(后端)更改header
[JavaScript] 纯文本查看 复制代码
res.header("Access-Control-Allow-Origin", "*"); // 允许的域名
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 允许的请求方法

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

打开config/index.js,在proxyTable中添写如下代码:
[JavaScript] 纯文本查看 复制代码
proxyTable: {
      '/mall': {
        target: 'http://www.abcd.com',
        changeOrigin: true
      }
    },

使用:
[JavaScript] 纯文本查看 复制代码
// 商品列表
  list (listParams) {
    return _http.request({
      type: 'post',
      url: '/mall/product/list.do',
      data: listParams
    })
  }

就可以正常发送ajax或者是axios请求了
第三种: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