Vue 踩坑-1-跨域问题
这个坑应该是趟了两遍了,被自己给笨到了,故进行一次总结,记录!
感谢老张的跨域解析:【.NET Core 3.0】框架之十二 || 跨域 与 Proxy
(早看到就不至于花那么多时间了,终究还是自己知识储备不够!)
为什么要跨域?
跨域,顾名思义,自然是我在做某些操作时,需要从本身所在的“域”向目标“域”进行请求(例如请求接口)。
在我们进行操作时,会引发同源问题,一般该问题源于浏览器的同源策略。
- 同源是在协议、端口和域名都相同时,才能构成同源,否则其中任意一个不同都会造成跨域。
- 同源策略是浏览器的一个安全功能,主要是限制不同源之间的文档或脚本在没有明确的授权下进行操作,隔离潜在恶意文件的重要安全机制。
所以,我们需要对需要访问的域进行一个标注。
怎么实现跨域?
1、CORS跨域
该方式偏向后端,主要是在后台服务中进行配置,缺点主要在与如果前端端口或者是域名更改,则需要后端的更改适配
-
配置CORS
在.NET Core项目中,我们需要在startup.cs 启动文件的 ConfigureServices 中添加如下配置:
services.AddCors(c => { // 配置策略 c.AddPolicy("LimitRequests", policy => { // 支持多个域名端口,注意端口号后不要带/斜杆:比如localhost:8000/,是错的 // http://127.0.0.1:1818 和 http://localhost:1818 是不一样的,尽量写两个 policy .WithOrigins("http://127.0.0.1:1818", "http://localhost:8080", "http://localhost:8021", "http://localhost:8081", "http://localhost:1818") .AllowAnyHeader()//允许任意头 .AllowAnyMethod();//允许任意方法 }); });
-
添加CORS中间件
public void Configure(IApplicationBuilder app) { ... app.UseStaticFiles(); app.UseRouting(); app.UseCors();//添加 Cors 跨域中间件 app.UseAuthentication(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapControllers(); }); }
2、Proxy跨域
该方式仅用于开发环境,发布后就失效了(被这个坑了),仅针对于Vue cli 3
-
添加vue.config.js文件
(Vue cli 3之前的版本则是在config文件夹中进行配置。)
在vue cli 3下不存在该文件,则于Vue项目根目录下添加vue.config.js文件。
-
配置Proxy
module.exports = { devServer: { proxy: { // 名字可以自定义,用于指定哪些请求需要被 target 对应的主机代理 // 当前 devServer 的地址是 localhost:8080 , 需要代理的地址是 localhost:3000 '/api': { target: 'https://localhost:44313/', // 设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, // 这里设置是否跨域 pathRewrite: { // 路径重写 '^/api': '' } } } } }
3、Nginx跨域
该方法得使用Nginx进行Vue的反向代理,如果你的大佬叫你老老实实的用IIS,你还是用第一种方式
-
安装Nginx与上传打包文件
-
配置nginx.conf文件
Windows下该文件位于Nginx安装目录下的 config文件夹下
Linux下位于etc/nginx文件夹下
server { listen 8077;#监听端口,也就是我们的项目端口 server_name localhost;#服务器主机 location / { root html;#监听文件夹,默认是nginx下的html文件夹,也可以自定义物理路径 E:\\Nginx\\test index index.html index.htm;#默认首次启动的文件 } #配置本地代理规则 location /api {#名字取一个 api rewrite ^.+apb/?(.*)$ /$1 break; #路径重写机制(无用,但是你也可以自己定义,对路由进行变化) include uwsgi_params; proxy_pass http://localhost:8081; #api接口的域名地址 }
-
记得配置完了重启Nginx。