前端怎么解决跨域问题

我只是一个渣渣
  • 278

一般面试的人很喜欢问这个。。有什么方法可以解决???
我听到有些人说vue cli里面可以配置代理。可是网上有说上线之后,这个代理还是会变成跨域的。(就是不生效的意思)

回复
阅读 2.8k
8 个回答

这种一般回答两点就可以了:
1.jsonp
2.CORS
这两个重点了解一下
其他方式还有postMessage、websocket、hash等等

前端当然是和后端一起解决跨域,ajax跨域的话,大部分后端搞一下就完事了,前端几乎不需要做啥。

甩锅给后台,实在不行jsonp、window.name或者通过修改document.domain来跨子域,还有就是使用HTML5中新引进的window.postMessage方法来跨域传送数据

开发阶段

vue cli 代理配置

config/index.js

    proxyTable: {
      '/api': {
        target: 'http://11.17.0.18:9999',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

上线后

让运维配置 nginx rewrite 就行了

还有么

让后端开发在页面 response.header 里加 允许跨域

这个问题还真的是历久弥新啊。

怎么说呢,我只能说我对于跨域问题有一定的了解,并且知道常规的两种解决方案。

  1. jsonp

其大概原理是利用script/img/link等标签可以跨域取回文件的性质,来实现跨域的。

  1. cors

这个是浏览器和服务器端共同合作去进行跨域的,浏览器端相关的接口有 fetch/xhr,并且这两者实现 cors 的跨

域流程应该还不一样,很蛋疼。

总之,跨域是一个很复杂的问题。

我补充一点,题主有兴趣可以去看一下,欢迎探讨。

  1. 为什么说 fetch/xhr 的流程不一样。

题主可以试试分别使用 fetch/xhr 跨域请求一个接口,这个接口要求附带 cookie,并且接口为非简单请求

caixuanxu
  • 4
新手上路,请多包涵

nginx 和 vue都可以配置的

都让开,让我来
题主这个问题其实比较广

一. 如果是开发环境需要连其它环境的API, 确保线上不存在问题的话,可以强制破开跨域问题
右击google浏览器 - 找到目标- 添加 --args --disable-web-security --user-data-dir

二. 楼主用的vue-cli, 处理接口的方式不需要写死域名 比如你要请求的是/user/login.json 直接这样写可以,然后在webpack上配置代理

devServer: {
    proxy: {
        '*': {
            target: 'xxxx', // 这里写要代理的ip
            secure: false,
            changeOrigin: true
        }
    }
}

三. 上线和开发还是存在跨域问题 那么直接通过jsonp去处理 原理其实很简单 就是通过<script>标签去加载接口 通过callback的方法接收回调

四 还有其它办法就不多说 百度就有 不常用就不说了

宣传栏