建设网站是哪个部门负责,wordpress集成插件下载,建设网站的和服务器,ps拼合网站截图怎么做文章目录一、跨域是什么二、如何解决CORSProxy一、跨域是什么
跨域本质是浏览器基于同源策略的一种安全手段
同源策略#xff08;Sameoriginpolicy#xff09;#xff0c;是一种约定#xff0c;它是浏览器最核心也最基本的安全功能
所谓同源#xff08;即指在同一个域Sameoriginpolicy是一种约定它是浏览器最核心也最基本的安全功能
所谓同源即指在同一个域具有以下三个相同点
协议相同protocol主机相同host端口相同port
反之非同源请求也就是协议、端口、主机其中一项不相同的时候这时候就会产生跨域 一定要注意跨域是浏览器的限制你用抓包工具抓取接口数据是可以看到接口已经把数据返回回来了只是浏览器的限制你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。 二、如何解决
解决跨域的方法有很多下面列举了三种
JSONPCORSProxy
而在vue项目中我们主要针对CORS或Proxy这两种方案进行展开
CORS
CORS Cross-Origin Resource Sharing跨域资源共享是一个系统它由一系列传输的HTTP头组成这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应
CORS 实现起来非常方便只需要增加一些 HTTP 头让服务器能声明允许的访问来源
只要后端实现了 CORS就实现了跨域 以koa框架举例
添加中间件直接设置Access-Control-Allow-Origin响应头
app.use(async (ctx, next) {ctx.set(Access-Control-Allow-Origin, *);ctx.set(Access-Control-Allow-Headers, Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild);ctx.set(Access-Control-Allow-Methods, PUT, POST, GET, DELETE, OPTIONS);if (ctx.method OPTIONS) {ctx.body 200; } else {await next();}
})ps: Access-Control-Allow-Origin 设置为*其实意义不大可以说是形同虚设实际应用中上线前我们会将Access-Control-Allow-Origin 值设为我们目标host
Proxy
代理Proxy也称网络代理是一种特殊的网络服务允许一个一般为客户端通过这个服务与另一个网络终端一般为服务器进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全防止攻击
方案一
如果是通过vue-cli脚手架工具搭建项目我们可以通过webpack为我们起一个本地服务器作为请求的代理对象
通过该服务器转发请求至目标服务器得到结果再转发给前端但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域
在vue.config.js文件新增以下代码
amodule.exports {devServer: {host: 127.0.0.1,port: 8084,open: true,// vue项目启动时自动打开浏览器proxy: {/api: { // /api是代理标识用于告诉nodeurl前面是/api的就是使用代理的target: http://xxx.xxx.xx.xx:8080, //目标地址一般是指后台服务器地址changeOrigin: true, //是否跨域pathRewrite: { // pathRewrite 的作用是把实际Request Url中的/api用代替^/api: }}}}
}通过axios发送请求中配置请求的根路径
axios.defaults.baseURL /api方案二
此外还可通过服务端实现代理请求转发
以express框架为例
var express require(express);
const proxy require(http-proxy-middleware)
const app express()
app.use(express.static(__dirname /))
app.use(/api, proxy({ target: http://localhost:4000, changeOrigin: false}));
module.exports app方案三
通过配置nginx实现代理
server {listen 80;# server_name www.josephxia.com;location / {root /var/www/html;index index.html index.htm;try_files $uri $uri/ /index.html;}location /api {proxy_pass http://127.0.0.1:3000;proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}
