- 什么是跨域
浏览器不能执行其他网站的脚本,浏览器的同源策略造成的,是浏览器施加的安全限制
像上图这种协议 域名 端口号 前后端出现有一个不同的就会发生跨域
localhost和127.0.0.1虽然都指向本机,但也属于跨域
2.解决跨域
你用的是Vue,那么可以通过设置 proxy代理的形式;如果你用的不是Vue,可以通过使用Nginx
Vue.config.js:
module.exports = {
//相当于webpack-dev-server, 对本地服务器进行配置
devSever : {
proxy: {
"/api" : {
target: " http://localhost:3000 ", //需要跨域的目标url ,我这里是自己本地起的一个服务端口
changeOrigin: true, // 将基于名称的虚拟托管网站的选项,如果不配置,请求会报404
ws: true,
pathRewrite: {
" ^/api " : "" //若请求的路径在目标url下但不在/api 下,则将其转换成空
}
}
}
}
}
- nginx
万字总结,体系化带你全面认识 Nginx !
https://juejin.cn/post/694260...
nginx前后端分离遇到的一些坑
https://blog.csdn.net/u012954...
# main段配置信息
user nginx; # 运行用户,默认即是nginx,可以不进行设置
worker_processes auto; # Nginx 进程数,一般设置为和 CPU 核数一样
error_log /var/log/nginx/error.log warn; # Nginx 的错误日志存放目录
pid /var/run/nginx.pid; # Nginx 服务启动时的 pid 存放位置
# events段配置信息
events {
use epoll; # 使用epoll的I/O模型(如果你不知道Nginx该使用哪种轮询方法,会自动选择一个最适合你操作系统的)
worker_connections 1024; # 每个进程允许最大并发数
}
# http段配置信息
# 配置使用最频繁的部分,代理、缓存、日志定义等绝大多数功能和第三方模块的配置都在这里设置
http {
# 设置日志模式
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main; # Nginx访问日志存放位置
sendfile on; # 开启高效传输模式
tcp_nopush on; # 减少网络报文段的数量
tcp_nodelay on;
keepalive_timeout 65; # 保持连接的时间,也叫超时时间,单位秒
types_hash_max_size 2048;
include /etc/nginx/mime.types; # 文件扩展名与类型映射表
default_type application/octet-stream; # 默认文件类型
include /etc/nginx/conf.d/*.conf; # 加载子配置项
# server段配置信息
server {
listen 80; # 配置监听的端口
server_name localhost; # 配置的域名
# location段配置信息
location / {
root /usr/share/nginx/html; # 网站根目录
index index.html index.htm; # 默认首页文件
deny 172.168.22.11; # 禁止访问的ip地址,可以为all
allow 172.168.33.44;# 允许访问的ip地址,可以为all
}
error_page 500 502 503 504 /50x.html; # 默认50x对应的访问页面
error_page 400 404 error.html; # 同上
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。