TOMMYHU

1、vue proxyTable接口跨域请求调试
或参考开发阶段 API 请求代理
在vue-cli项目中的config文件夹下的index.js配置文件中，dev长这样子：
dev: {     env: require('./dev.env'),     port: 8080,     autoOpenBrowser: true,     assetsSubDirectory: 'static',     assetsPublicPath: '/',     proxyTable: {},       cssSourceMap: false   }
服务器提供的接口如果长这样https://www.exaple.com/server_new/login，我们把域名提取出来如https://www.exaple.com；

在config中新建一个文件命名为proxyConfig.js :
module.exports = {   proxy: {         '/apis': {    //将<a href="http://www.exaple.com" target="_blank">www.exaple.com</a>印射为/apis             target: 'https://www.exaple.com',  // 接口域名             changeOrigin: true,  //是否跨域             pathRewrite: {                 '^/apis': ''   //需要rewrite的,             }                       }   } }
config文件夹下的index.js引入proxyConfig.js：
var proxyConfig = require('./proxyConfig') config文件夹下的index.js中的dev改成: [codes=c#] dev: {     env: require('./dev.env'),     port: 8080,     autoOpenBrowser: true,     assetsSubDirectory: 'static',     assetsPublicPath: '/',     proxyTable: proxyConfig.proxy,     cssSourceMap: false   }   
重启项目npm run dev：

你会发现出现了这个



这个时候我们已经设置好了本地API代理了

修改本地hosts文件
文件路径一般是C:\Window\System32\drivers\etc，打开hosts文件，在这一段下面把localhost设置进去
# localhost name resolution is handled within DNS itself. # 127.0.0.1       localhost # ::1             localhost 127.0.0.1                   activate.adobe.com 127.0.0.1                   practivate.adobe.com 127.0.0.1                   lmlicenses.wip4.adobe.com 127.0.0.1                   lm.licenses.adobe.com 127.0.0.1                   na1r.services.adobe.com 127.0.0.1                   hlrcv.stage.adobe.com
localhost                   www.exaple.com            
搞定
此时我们已经完全解决了跨域问题，以及本地测试后台无法向我们本地环境设置cookie的情况了。

2、后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
前端post请求设置withCredentials=true
这里用了axios的请求数据方法代码如下：
import axios from 'axios' import config from '../config' export default { request (method, uri, data, headerConfig = {withCredentials: true}) { if (!method) { console.error('API function call requires method argument') return } if (!uri) { console.error('API function call requires uri argument') return } let url = config.serverURI + uri return axios({ method, url, data, ...headerConfig }) } }
jQuery的$.ajax:：
$.ajax({ type: "POST", url: "http://www.xxx.com/api.php", dataType: 'json', xhrFields: {   withCredentials: true }, crossDomain: true }).then((json) => { // balabala... })

3、jsonp

jsonp也是一种解决跨域的方法，不过我从来没有用过，在网上查了下资料，jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求。

4、nginx配置
最近使用vue开发一个功能，npm run build之后打包的代码放在了a.com.cn下但是php接口部署在了b.com下，那么问题来了，如何让后端接口支持跨域。有两种方法：

让后端在返回数据的时候设置下返回请求的header，这种方法比较不稳定，因为接口一旦多了就得改好多代码，而且每次出了问题还得去找后端开发改代码，很烦。

另一种方法是，自己配置nginx，首先ssh登录到部署接口所在的服务器，修改nginx配置，在http对象中加入两行代码：
http {   // 需要加入的代码   add_header Access-Control-Allow-Origin <a href="http://a.com.cn" target="_blank">http://a.com.cn</a>   add_header Access-Control-Allow-Credentials true   server {     // b.com.cn的具体配置   } }
改完重启下nginx，然后在vue项目中，在导入axios的地方加如以下代码：
import axios from 'axios' axios.defaults.withCredentials = true
然后测试，发现就可以跨域了。
▲返回顶部
Last modified by tommyhu on2018/06/01 14:39