百度站长平台网站提交,微信小程序官方教程,wordpress自动注册插件,河南做网站找谁跨域问题是由于同源策略的原因#xff0c;在协议(HTTP或HTTPS)不同、端口号(8080或8881)不同、主机IP(182.92.178.25或者182.92.178.26)不同时而导致的不能进行数据交换的问题。
当后端没有做跨域时#xff0c;前端就需要自己配置。
类型一#xff1a;使用代理服务器的方法…跨域问题是由于同源策略的原因在协议(HTTP或HTTPS)不同、端口号(8080或8881)不同、主机IP(182.92.178.25或者182.92.178.26)不同时而导致的不能进行数据交换的问题。
当后端没有做跨域时前端就需要自己配置。
类型一使用代理服务器的方法
原理本机直接向服务器发起请求服务器发现本机的协议、端口号或主机IP与自己不同为了安全起见不会将数据响应出去此时本机创建一个代理服务器代理服务器在接收本机请求时是不会排斥的收到请求之后会将请求转发给服务器而此时代理服务器的协议、端口号或主机IP是自己设置的也就是与服务器的相同。
方法一在package.json中最外面的大括号里添加一条属性“proxy”值为需要转发的协议IP端口。
例如本地为http://localhost:8080请求的数据在http://182.92.178.25:8880那么在原来的位置还写成http://localhost:8080在proxy后面写http://182.92.178.25:8880即可。
该方法优点是方便配置缺点是只能配置一条转发不适用于向多个服务器请求数据。
方法二在src同级(也好像是src子级)下创建名为setupProxy.js的文件在里面粘贴如下内容
const proxyrequire(http-proxy-middleware)module.exprotfunction(app){app.use(proxy(api1,{//遇见api1前缀的请求就会触发该代理配置,必须放在端口号后面第一位target:http://localhost:5000,//将带有api1的请求转发到的路径changeOrigin:true,//控制服务器收到的响应头中Host字段的值Host字段标识请求从哪发出的。没太大影响但最好加上。pathRewrite:{^/api1:}//重写请求路径将路径中的api1给清除}),proxy(api2,{//可以配置多个代理target:http://localhost:5001,changeOrigin:true,pathRewrite:{^/api2:}}))
}
该方法缺点是配置较为麻烦但优点是可以配置多重代理可以转发任意数量的服务器。
方法三在 根目录/config/config.js中写上如下配置
proxy: {/api: {//遇见api前缀就会触发该代理target: http://8.141.88.60:8000,//要转发的代理changeOrigin: true,//控制服务器收到的响应头中Host字段的值Host字段标识请求从哪发出的。},
},
该方法是方法一和方法二的综合体配置简单并且可以配置多条代理。
类型二nginx反向代理
如果是前端同学自己部署前端项目并且服务器与后端不同时会用到这种方法因为当项目上线之后就不会走原来代码中配置的代理所以就需要使用nginx进行反向代理。前端同学想要学习部署项目的话可以看阿里云Xshell部署前端项目从准备工作到部署成功亲测详解小白友好型_阿里云服务器部署前端代码-CSDN博客 下方为整个nginx配置反向代理部分已经标注出来需要复制粘贴的话可以将文字部分删除。
server {listen 8880;server_name localhost;location / {root /web/html1/dist;try_files $uri $uri/ /index.html;index index.htm index.html;}#这一块就是反向代理的操作可以看出来这和使用代理服务器还是很像的location /api {#在路径中遇到api时进行转发proxy_pass http://8.141.88.60:8000;#转发路径}error_page 404 /404.html;location /404.html {}error_page 500 502 503 504 /50x.html;location /50x.html {}
}
注意同一种方法不一定适合所有情况这边只提供了三种我遇到过的情况同学们可以逐个尝试一下。
