Vue+nginx实现跨域访问
1、跨域和同源策略
什么是同源策略？
同源策略是指浏览器处于安全考虑的情况下，只允许本域下的借⼝进⾏交互。不同源的客户端在没有授权的情况下是不允许获取对⽅资源的。
本域指的是什么？
同协议：例如相同的http或https
　同端⼝：例如8080端⼝
⼀个⽰例：
跨域解决⽅案：
JSONP
CORS
nginx反向代理
降域
postMessage
JSONP：最早的解决⽅案，利⽤script标签可以跨域的原理实现，只⽀持get请求
CORS：同源策略
优势：
在服务端进⾏控制是否允许跨域，可⾃定义规则
⽀持各种请求⽅式
缺点：
会产⽣额外的请求
nginx反向代理
思路是：利⽤nginx反向代理把跨域为不跨域，⽀持各种请求⽅式
缺点：需要在nginx进⾏额外配置，语义不清晰
降域和postMessage:
当没api接⼝遇到跨域问题时，会报XMLHttpRequest跨域提⽰：
当使⽤CORS策略，解决跨域问题时，我的做法是在服务端设置允许访问的接⼝地址：
app.use(async (ctx, next) => {
//添加允许请求头
// ctx.append('Access-Control-Allow-Origin', '*')
// ctx.append('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild')
// ctx.append('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS,PATCH')
// //ctx.append('Content-Type', 'application/json;charset=utf-8')
// console.log(`Process ${hod} ${quest.url}...`);
// logger.info(`Process ${hod} ${quest.url}...`)
//http 预请求处理(post/put/delete 请求在正式请求之前会先发送⼀个OPTIONS的预请求，只需要把这个OPTIONS的预请求正常返回，后续的请求就会正常执⾏)
if (hod === 'OPTIONS') {
ctx.body = "OK"
} else {
//继续执⾏api请求
await next();
}
});
node.js设置允许跨域
因为项⽬中使⽤的是vue+node.js实现，⽽vue⾃⾝可以设置proxy实现跨域，所以最终采⽤vue proxy+nginx反向代理，实现跨域
2、Vue 设置代理实现本地跨域
当前项⽬使⽤vue-cli3.0版本构建
⾸先在根⽬录下创建fig.js⽂件，这个配置⽂件会在运⾏项⽬的时候⾃动加载
runtimeCompiler: true,
publicPath: '/', // 设置打包⽂件相对路径
devServer: {
open: process.platform === 'darwin',
host: '127.0.0.1',
port: 3000,
// open: true, //配置⾃动启动浏览器
proxy: {
'/api': {
// target: v.VUE_APP_BASE_URL, //对应⾃⼰的接⼝
target: '', //对应⾃⼰的接⼝
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
}
解释：
proxy对象标识，对/api 开头的接⼝实现代理
target：’’，代理的接⼝地址，
changeOrigin:true，是否跨域
secure:false, 如果是https接⼝，需要配置这个参数
pathRewrite:{},//重写api路径，因为原来接⼝中不存在’/api’，我们⼈为加上去就是为了标识哪些接⼝需要实现代理，但是真正访问接⼝的时候还是要把接⼝uri中的‘/api’替换为‘’
我们不仅可以为’/api’实现代理，也可以为其他具有同类功能的接⼝实现代理，⽐如我们的接⼝是发布在多个微服务中的，就需要我们设置多个代理地址，
这时，就不能对axios设置统⼀的baseURL
//axios.defaults.baseURL = ‘’
在使⽤axios请求接⼝的时候，如果需要跨域，则在请求接⼝前加载‘/api’，例如：
const server=’/api’
const uri=server+’/ patient_survey/findByPage’
axios.post(uri).then(res=>{})
配置完成之后本地就可以跨域访问了，
通过浏览器F12查看请求地址为：
但是实际的接⼝请求地址为：devServer.proxy.target中的地址
所以实际请求的uri为：/patient_survey/findByPage
3、vue+nginx实现服务端跨域
但是把vue项⽬打包发布之后，调⽤接⼝会提⽰404错误，这时还需要在nginx中做⼀下反向代理
在服务器中到nginx的配置⽂件fig
在需要添加反向代理的配置项中添加如下：
location /api {
rewrite ^.+api/?(.*)$ /$1 break; //可选参数，正则验证地址
include uwsgi_params; //可选参数，uwsgi是服务器和服务端应⽤程序的通信协议，规定了怎么把请求转发给应⽤程序和返回
}
server {
listen 80;
server_name xxx;
charset utf8;
location / {
root /data/release/xxx;
index index.html;
proxy_pass 127.0.0.1:8003;
}
location /api {
rewrite ^.+api/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass ;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
设置完成后重启nginx
nginx –s reload
完成后服务器应该也能实现跨域
参考：
4、vue配置环境变量
在实现vue的跨域访问之后，为了⽅便本机调试和发布，可以在vue中设置不同的环境变量，使项⽬在不同的环境中⾃动调⽤不同的接⼝地址
需要⽂件：
nginx 配置文件在vue项⽬根⽬录下创建三个⽂件
.env ⽆论开发环境还是⽣成环境都会加载
.env.development 开发环境加载这个⽂件
.env.production ⽣成环境加载这个⽂件
如果需要其他环境，可以继续添加其他环境的配置⽂件
.env ⽂件内容：
    NODE_ENV = production
.env.development ⽂件内容：
    NODE_ENV = development
.env.production ⽂件内容：
    NODE_ENV = production
（其中’VUE_APP_’是固定前缀，不可以更改）
⽂件加载顺序：
⾸先加载.env⽂件，判断当前的项⽬环境，
如果是开始环境，则继续加载.env.development的内容，
如果是⽣产环境，则加载.env.production的内容,
ps：测试发现，当前的系统环境并不是.env⽂件中的NODE_ENV =xxx 确定的，⽽是根据实际情况决定，如在ide中使⽤npm run serve调试，则加载的是.env.development⽂件
如果执⾏npm run build 之后发布到服务器，则加载的是.env.production⽂件
pageage.json的scripts部分如下
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
在项⽬main.js⽂件可以打开查看当前的系统变量：
console.log('v',v)
设置完之后，在开始的fig.js代理⽂件中，将target指向改为： v.VUE_APP_BASE_URL 之后，vue会根据执⾏环境的不同⾃动加载相应的接⼝地址

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。