Vue项目中跨域的几种方式

经常使用vue + webpack搭建项目，但在请求某些json数据时存在跨域问题，此时有几种修改方法

1. 修改后台header，但如果只是请求外部数据，是没法修改后台配置的

1 header('Access-Control-Allow-Origin:*');//允许所有来源访问
2 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

2. 修改webpack配置 , 这是使用webpack选项devServer的代理功能 proxy

1 proxyTable: {
2   '/api': {
3     target: '填写请求源地址', //源地址
4     changeOrigin: true, //是否跨域
5     pathRewrite: {
6       '^/api': '' //路径重写
7       }
8   }
9 }

注意：如果不设置pathRewrite则可能会出现以上报错

另外：proxyTable是在vue-cli2.0项目中config/index.js配置好的选项，实际上它指向build/webpack.dev.config.js中的devServer.proxy

在新版的@vue/cli中（即vue-cli3.0）没有直接暴露出webpack的配置，只需在根目录下自行创建vue.config.js然后配置如下

 1 module.exports = {
 2     devServer: {
 3     proxy: {
 4         '/api': {
 5         target: '填写请求源地址',
 6         ws: true,
 7         changeOrigin: true,
 8                 pathRewrite: {
 9                    '^/api': ''
10                 }
11         }
12     }
13      }
14 }

最后一般在组件中使用axios或者fetch请求本地服务即可，此时外部数据已经被转到了本地服务器中

1 axios.get('/api/xxx')
2   .then(res => {
3       console.log(res)
4   })
5   .catch(err => {
6       console.log(err)
7 })

 1 fetch('/api/xxx', {
 2   method: 'GET',
 3   headers: {
 4       'content-type': 'application/json'
 5   },
 6   mode: 'no-cors'
 7   })
 8   .then(res => res.json())
 9   .then(json => {
10       console.log(json)
11    })

3.使用jQuery的JSONP()

1 $.ajax({
2   url: '请求的源地址',
3   type: 'GET',
4   dataType: 'JSONP',
5   success(res) {
6      console.log(res)
7    }
8 })

转载于:https://www.cnblogs.com/hughes5135/p/10183445.html

Vue项目中跨域的几种方式相关推荐

vue项目中跨域解决方案
在项目根目录下新建vue.config.js文件,里面内容如下 module.exports={devServer: {proxy:{'/api':{target:'http://localhost: ...
vue项目中跨域问题的解决
1.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分.代码如下:主要修改的是 proxyTable:{}内部的内容 dev: {env: require ...
vue解决线上跨域的问题_Vue项目中跨域问题解决方案
方法后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header('Access- ...
springboot项目解决跨域的几种方式
跨域资源共享(CORS):通过修改Http协议header的方式,实现跨域.说的简单点就是,通过设置HTTP的响应头信息,告知浏览器哪些情况在不符合同源策略的条件下也可以跨域访问,浏览器通过解析Htt ...
vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...
只有ajax会跨域吗_ajax处理跨域有几种方式
jQuery 使用 JSONP 缺点: 1.这种方式无法发送post请求(这里) 2.另外要确定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时时间来判定. 跨域的几种方式在项目中可能 ...
[译]使用Webpack提高Vue.js应用程序的4种方式
[译]使用Webpack提高Vue.js应用程序的4种方式原文地址 Webpack是开发Vue.js单页应用程序的重要工具.通过管理复杂的构建步骤,您可以更轻松地开发工作流程,并优化应用程序的大 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
什么是同源策略及解决跨域的三种方式
同源策略 1.1.1 所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源.同源策略/SOP(Same origin policy)是一种约 ...

Vue项目中跨域的几种方式

Vue项目中跨域的几种方式相关推荐

最新文章

热门文章