### 1、方法一，后端更改header
```
header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 　
```

### 2、启用Vue的proxyTable
打开`/config/index.js`文件，在`proxyTable`节点改写成如下代码：
```
proxyTable: {
	'/api/**': {
		target: 'http://localhost:3000',
		pathRewrite:{
			'^/api':'/'
		}
	},
},
```

然后在我们之前说过的全局变量文件中，改写成以下代码：
```
// 全局常量定义
// v1.0.1

// 引入ajax包
import axios from 'axios'
// 设置ajax请求地址，解决跨域问题
const isPro = Object.is(process.env.NODE_ENV, 'production')
// 左为生产环境，右为测试环境
const baseUrl = isPro ? 'http://www.junphp.com/api/' : 'api/';
// 如果你的接口与项目不是同一域名下，可直接将baseUrl设置为对应的接口地址即可，例如：
// const baseUrl = 'http://www.junphp.com/api/';
axios.defaults.baseURL = baseUrl;

// 常量表
const config = {
    // ajax插件
    axios:axios,
    // 版本号
    edition:'v1.0.1',
    // 项目名称
    entry_name:'Vue2测试项目'
}

// 常量定义函数
let bindToGlobal = (obj, key) => {
     if (typeof window[key] === 'undefined') {
         window[key] = {};
     }

for (let i in obj) {
         window[key][i] = obj[i]
     }
}
bindToGlobal(config,'_config')
```

最后直接使用axios发送请求即可，所有接口都会默认带上所设置的前缀。

### 3、注意
`const baseUrl = isPro ? 'http://www.junphp.com/api/' : 'api/';`
这样的方式是用于同域的情况下，解决项目打包后，ajax地址错误的问题。

`const baseUrl = 'http://www.junphp.com/api/';`
则是解决api地址不是同域名的情况下，所使用的解决方法。

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺