vue常用的几种跨域方式

vue 跨域问题

1.可以在vue脚手架中的config文件中设置代理,

通过设置代理，将后台的地址http://localhost:3000配置成‘/api’

dev:{
 assetsSubDirectory: 'static',
 assetsPublicPath:'/',
 proxyTable: {
	"/api":{
	target:"http://localhost:3000", //这里是后端地址
	changeOrigin:true
}
}
}
           

2.在后台自己写跨域方法：我的是（Node）

var express = require("express");
var app = express();

app.use((req,res,next)=>{
   res.header("Access-Control-Allow-Credentials", "true"); 
// res.header('Access-Control-Allow-Origin', '*');
　　res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
　　res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
　　res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
　　if (req.method == 'OPTIONS') {
　　　　res.send(200); /*让options请求快速返回*/
　　} else {
　　　　next();
　　}
})
           

3.后端使用Cors模块

npm install cors --save

在配置文件中

var express = require(‘express’);

var app = express();

var cors = require(‘cors’);

//全局加入配置

app.use(cors())

4.指定跨域地址

var express = require('express');
var app = express();
var cors = require('cors');
var corsOptions = {
  origin: 'http://www.baidu.com', //只有百度可以访问
  optionsSuccessStatus: 200 
}
// 指定的路由可以跨域访问
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: '只有百度可以访问'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})