vue 项目中, 前端与后台进行数据请求或者提交的时候, 如果后台没有设置跨域, 前端本地调试代码的时候就会报 "No'Access-Control-Allow-Origin'header is present on the requested resource." 这种跨域错误.
一, 后台更改 header(在你需要跨域的接口里 写上这两句话就行)
- header('Access-Control-Allow-Origin:*');// 允许所有来源访问
- header('Access-Control-Allow-Method:POST,GET');// 允许访问的方式
这样就可以跨域请求数据了.
二, 使用 jQuery 提供的 JSONP (注: vue 中引入 jQuery, 自行百度)
- methods: {
- getData () {
- var self = this
- $.Ajax({
- url: 'http://f.apiplus.cn/bj11x5.json',
- type: 'GET',
- dataType: 'JSONP',
- success: function (res) {
- self.data = res.data.slice(0, 3)
- self.opencode = res.data[0].opencode.split(',')
- }
- })
- }
- }
通过这种方法也可以解决跨域的问题.
三, 使用 http-proxy-middleware 代理解决 (项目使用 vue-cli 脚手架搭建)
例如请求的 url:"http://f.apiplus.cn/bj11x5.json"
1, 打开 config/index.JS, 在 proxyTable 中添写如下代码:
- proxyTable: {
- '/api': {
- // 使用 "/api" 来代替 "http://f.apiplus.c"
- target: 'http://f.apiplus.cn', // 源地址
- changeOrigin: true, // 改变源
- pathRewrite: {
- '^/api': 'http://f.apiplus.cn' // 路径重写
- }
- }
- }
2, 使用 axios 请求数据时直接使用 "/api":
- getData () {
- axios.get('/api/bj11x5.json', function (res) {
- console.log(res)
- }
- })
通过这中方法去解决跨域, 打包部署时还按这种方法会出问题. 解决方法如下:
- let serverUrl = '/api/' // 本地调试时
- // let serverUrl = 'http://f.apiplus.cn/' // 打包部署上线时
- export default {
- dataUrl: serverUrl + 'bj11x5.json'
- }
调试时定义一个 serverUrl 来替换我们的 "/api", 最后打包时, 只需要将 "http://www.xxx.com" 替换这个 "/api" 就可以了.
来源: http://www.jianshu.com/p/22c675687d2f